4-6、CSS3转换

最新推荐文章于 2023-04-10 20:38:35 发布

鸵鸟大师

最新推荐文章于 2023-04-10 20:38:35 发布

阅读量157

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_30754745/article/details/105446083

版权

本文详细介绍了CSS3中的转换功能，包括2D和3D旋转、平移、缩放以及扭曲。重点讨论了rotate()、translate()、scale()、skew()函数的用法，3D变换中的rotate()、translate()、scale()和transform-origin，以及复杂的矩阵变换和相关扩展属性，如transform-style、perspective和backface-visibility。建议读者多加练习以掌握这些概念。

摘要由CSDN通过智能技术生成

4-6、CSS3转换（重点）

transform 让元素在一个坐标系中变形。这个属性包含一系列变形函数，可以移旋转和缩放元素。

transform: none | <transform-function> ;
默认值是none，后边是函数，可以跟多个函数。

rotate()	旋转
translate()	平移
scale()		缩放
akew()		扭曲或斜切

rotate() 旋转：

通过指定角度参数对原元素指定一个2D旋转。
transform : rotate(60deg);
正数表示顺时针旋转，复数表示逆时针旋转。

translate() 平移：

根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动。
三种情况：
translateX(x）仅水平方向移动（X轴移动）；
translateY(y）仅垂直方向移动（Y轴移动）；
translate(x,y）水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；
transform: translateX(30px);
这里的值只能是固定值，比如px、em，%等。
坐标轴原点是父容器的左上角。
translate(x,y）时，如果只写一个值，默认是x轴变化，y轴默认是0.

scale() 缩放：

指定对象的2D缩放。
三种情况：
scaleX() 元素仅水平方向缩放（X轴缩放）；
scaleY() 元素仅垂直方向缩放（Y轴缩放）；
scale(x,y) 使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）。
transform: scaleX(0.5);
坐标线在中间，而不是左上角。
scale(x,y) 时，如果只写一个值，那么默认xy同值，等比例缩小，和平移不一样。