transform: translate(); transform: scale(); transform: rotate(); transform: skew();
接下来,将对上述四种变形方式进行深入讲解:
1. translate():对元素进行平移
transform: translate(50px, 50px);
以上代码将元素沿X轴和Y轴同时平移50像素。
2. scale():对元素进行缩放
transform: scale(2, 2);
以上代码将元素沿X轴和Y轴同时放大两倍。
3. rotate():对元素进行旋转
transform: rotate(45deg);
以上代码将元素旋转了45度。
4. skew():对元素进行倾斜
transform: skew(30deg, 20deg);
以上代码将元素沿X轴方向倾斜30度,沿Y轴方向倾斜20度。
CSS3中的变形功能极为强大,可以大大提升网站动画效果的展示。如需了解更多信息,请参考CSS3官方文档。