[分享]css3块元素的平移旋转

CSS3块元素的平移旋转是一个非常有用的特性，它允许你更加灵活地控制页面上的元素。

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  transition: all 0.5s ease;
}
.box:hover {
  transform: translateX(50px) rotate(45deg);
} 

上面的代码演示了如何使用CSS3的平移旋转来控制一个红色方块元素的位置和角度。首先，在.box元素的CSS样式中，我们设置了其宽度、高度、背景色和相对定位，同时还设置了一个过渡效果，以便在元素属性修改时有平滑的过渡效果。

接着，在.box:hover的CSS样式中，我们设置了当鼠标悬停在元素上时的变化：我们使用了transform属性来实现元素的平移和旋转。在这里，我们使用translateX函数来将元素向右平移50像素，并使用rotate函数将元素旋转45度。

总的来说，CSS3的平移旋转功能使得我们可以更加自由地控制页面元素的位置和角度，让网页设计更加灵活多样。