第十五章:transform变形属性
一、2D变形
transform属性可以使元素进行旋转、平移、缩放、倾斜等形状的变化,简称变形。下面的属性值,分别代表着元素的变化状态
1. rotate()旋转属性值
transform: rotate(角度值); 单位:deg
如:transform: rotate(45deg);
如:transform: rotate(-45deg);
- 元素是默认围绕正中心点进行旋转的;
- 角度值为正数,表示顺时针旋转;
角度值为负数,表示逆时针旋转。
2. translate()位移属性值
- 复合写法:设置元素以自身初始位置为原点的偏移效果
transform:translate(水平偏移量,垂直偏移量); 单位:像素值/百分比
如:transform: translate(200px,300px);
或:transform: translateX(200px) translateY(300px)
- 单独写:字母X和Y必须是大写的
偏移量X:定义元素水平方向的偏移量,在水平方向上移动,可以单独用translateX()来设置
如:transform: translateX(100px);
偏移量Y:定义元素垂直方向的偏移量,在垂直方向上移动,可以单独用translateY()来设置。
如:
transform: translateY(200px);
3. scale()缩放属性值
transform: scale(缩放倍数值);
- 默认缩放数值为1。数值为正数,即为正常缩放;数值为负数,即为倒置缩放。
- 数值取值范围:
倍数:0~1 正常缩小,> 1 正常放大;
倍数: <0,元素倒置(-1~0 倒置缩小,小于-1 倒置放大)。- 缩放倍数值可以设置两个数值,分别表示水平缩放scaleX,和垂直缩放scaleY。因此也可复合写和单独写。
4. skew()倾斜属性值
transform: skew(倾斜角度值); 单位:deg
倾斜角度值可设置一个,也可以设置两个值,分别表示水平方向倾斜skewX,和垂直方向倾斜skewY,同前面两个一样。
5. transform-origin 变化原点属性
元素默认的变化原点就是该元素的中心点,我们可以通过transform-origin 属性自定义设置变化原点作为上述4种变形的参考点。
transform-origin:水平位置 垂直位置; 可用百分比或px像素值表示
- 默认值为
transform-origin:50% 50%; /*是元素的正中心位置:*/
。- 也可以根据需要自行设置变化的原点位置。
例如: 设置左上角顶点为变化原点
transform-origin:0 0;
6. 复合写法、变换顺序组合
上述4种变形可通过复合写法来表示
- 规范的顺序:
transform: scale() translate() skew() rotate();
- 先后顺序的问题:即使是同样的属性值,写的顺序不同,其带来的结果也不一样,所以一般把旋转放在后面。
先看一段代码:
.wrap .box1{
/* 先平移,水平移动200px,垂直移动200px,最后旋转45度 */
transform: translate(200px,200px) rotate(45deg);
}
.wrap .box2{
/* 先旋转,旋转45度 ,再水平移动200px,垂直移动200px */
transform: rotate(45deg) translate(200px,200px) ;
}
效果图:
我们会发现先平移再旋转与先旋转再平移之后的效果完全不一样。那是因为如果先旋转之后,则其移动的原本水平方向和垂直方向会因旋转的改变而改变。
二、3D变形
3D变形,同样拥有和2D变形一样拥有上述4种状态、以及变化原点的改变。此处我们着重讲解3D位移和3D旋转。
1. 3D的方向感
以屏幕作为参考面:
- X轴:水平方向,即左右方向
- Y轴:竖直方向,即上下方向
- Z轴:垂直于X轴和Y轴所组成的平面方向,即垂直于屏幕面的方向
2. perspective视觉景深属性
要看到3D的变化效果,必须设置景深 perspective属性,用像素值表示。
- 景深,即为视距效果,视距越大看的也就越远(一般最少600px起步)
- 给进行了3D变形元素的父级添加perspective属性,而不是变形元素本身。
3. transform-style: preserve-3d;显示3D层级
如果子元素有多个3D变形效果,需要添加transform-style: preserve-3d;
属性,开启上帝视角,展示多个子元素的3d效果,来显示正确的3D层级。
4. 3D变形
3D缩放和3D倾斜用的较少,主要应用3D位移和3D旋转。
3D变形多结合于动画,伪类、js等来实现
- 3D位移:
transform: translateX()
表示X方向上(水平方向上)的移动量transform: translateY()
表示Y方向上(竖直方向上)的移动量transform: translateZ()
表示Z方向上(垂直于X、Y所在平面的方向上)的移动量transform: translate3d()
三个方向上的移动量。(注意:其他几个变形属性值不一定都支持这种复合的写法)
- 3D旋转:
transform: translateX()
表示绕X轴旋转transform: translateY()
表示绕Y轴旋转transform: translateZ()
表示绕Z轴旋转
具体使用案例可移步后面两篇文章:利用3D属性制作心动的感觉、旋转魔盒的案例
总结
上述是小编为大家整理的2D变形的4种属性值:旋转、位移、缩放、倾斜所代表的4种变形状态,以及变化原点属性,多种变形状态的复合写法,特别是强调了不同顺序导致不同的变形结果。3D变形的对视觉景深和如何展示3D层级等都进行了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的,或有不确之处和疏漏的地方,还望各位大佬能够不吝赐教,加以斧正,小编在此先行谢过了。