2D变换
-
transform 元素的变换
-
transform的2D变化的值
-
平移 translate
能使元素的位置发生移动
1.1 translateX(偏移值x) 沿x轴方向平移
1.2 translateY(偏移值y) 沿y轴方向平移
1.3 translate(偏移值x, 偏移值y) 沿x和y轴方向平移
-
缩放 scale
本质上缩放的是坐标轴的单位长度。产生的效果: 尺寸不修改的 情况下, 放大缩小元素
2.1 scaleX(x轴缩放倍数)
2.2 scaleY(y轴缩放倍数)
2.3 scale(x轴缩放倍数, y轴缩放倍数)
元素缩放默认的基准点是中心点, 缩放永远会从基准点向外缩放
-
倾斜 skew
倾斜是一种剪切映射, 它在水平和垂直方向上将单元内的每个点扭曲一定的角度
3.1 skewX(水平方向倾斜角度)
3.2 skewY(垂直方向倾斜的角度)
3.3 skew(水平方向倾斜角度, 垂直方向倾斜的角度)
角度值 单位 deg
水平方向倾斜, 旋转Y轴, 值为正, Y轴逆时针旋转, 值为负, Y轴顺时针旋转
垂直方向倾斜, 旋转X轴, 值为正, X轴顺时针旋转, 值为负, X轴逆时针旋转 -
旋转 rotate
4.1 rotateX(x轴旋转的角度) 绕x轴旋转
4.2 rotateY(y轴旋转的角度) 绕y轴旋转
4.3 rotate(z轴旋转的角度) 绕z轴旋转
注意: 元素旋转之后, 可能会形成立体的空间, 但是系统默认的3d立体效果是关闭的, 如果想要看3d立体效果, 需要人为打开。
哪个元素形成立体空间, 要把打开立体效果的代码加个它的父级, 不是它本身!!!
绕x轴旋转 正值 从左往右看 逆时针旋转; 负值, 顺时针旋转
绕y轴旋转 正值 从上往下看 逆时针旋转; 负值, 顺时针旋转
-
2D变换参考的坐标轴为x-y的平面坐标轴
重要的注意点:
1. 在元素的变化概念里, 所谓的坐标轴, 不是指整个页面只有一个x-y, 要理解成每个元素都有一个自己的坐标轴, 对某个元素的变换, 只影响自身的坐标轴, 不影响其他元素的坐标轴
2. transform产生的变换, 本质上影响的不是元素, 而是坐标轴。 一旦坐标轴发生了变换 , 之后所有的操作都是在已发生改变后的坐标轴上进行的。
3. transform的书写顺序, 有些时候会影响最终的展示效果, 原因参考第2个注意点
-
eg:
.box img:nth-child(2) { /*旋转img2*/ transform: rotateY(-40deg); animation: rotateImg 2s linear infinite; } @-webkit-keyframes rotateImg{ from{transform: rotateX(40deg) rotateY(30deg);} to{transform: rotateX(400deg) rotateY(390deg);} }
3D变换
-
3D变化相比与2D多了一条z轴, 是一个立体坐标轴
1. 平移
2. 旋转
默认情况下, 元素在绕Z轴旋转的基准点为元素的中心点;如果想要改变旋转的基准点, 使用transform-origin: x方向位置, y方向位置
2.1 px数值
2.2 方位单词
水平方向: left center right
垂直方向: top center bottom
2.3 百分比 相对于宽高
-
eg:
img { width: 200px; /*transform-origin: 200px 100px;*/ /*transform-origin: right bottom;*/ transform-origin: 50% 50%; animation: rotateImg 1s infinite; } @-webkit-keyframes rotateImg{ from{ transform: rotateZ(0deg); } to{ transform: rotateZ(360deg); } }