CSS3 2D & 3D 转换 (transform)

1. 2D转换

1.1 移动 translate

类似于定位。可以改变元素在页面的位置。

语法：transform: translate(x,y) | translateX(n) | translateY(n)
说明：

• translate定义移动时沿着X和Y轴移动元素。
• 通过该属性移动元素不会影响到其他元素的位置！！！
• translate中的值是可以设置为百分比形式的，如果是以该形式设置则移动的距离是以盒子自动的宽度或者高度来对比的。比如：translate:(50%,50%)。
• 该属性对行内标签没有效果。

1.2 旋转 rotate

2D旋转是指让元素在2维平面内顺时针或逆时针旋转。

语法：transform:rotate(度数)
说明：

• rotate里面的度数单位是 deg。比如： 45deg表示45度。
• 角度为正时，顺时针旋转；角度为负时，逆时针旋转。
• 默认旋转的中心点是元素的中心点。

设置变换中心点：transform-origin: x y;

• x y 默认转换的是元素的中心点，即（50%，50%）。
• 可以给x y 设置像素 或者方位名词或者百分比。

1.3 缩放 scale

控制元素的放大或缩小。

语法：transform:scale(x,y);
说明：

• x y 写的是数字不跟单位，就是倍数的意思。比如 1 的意思就是1倍。
• 等比例缩放：transform:scale(n);
• 特点：不会影响其他元素。

2. 动画

制作动画的步骤：

1. 定义动画（使用keyframes）

   /*0%是动画的开始，100%是动画的完成。*/
   @keyframes 动画名称{
   	0%{
   		width:100px;
   	}
   	100%{
   		width:200px;
   	}
   }
   

2. 调用动画

   div{
   	/*调用动画*/
   	animation-name: 动画名称;
   	/*持续时间*/
   	animation-duration:持续时间;
   }
   

动画常用属性：

属性	说明
@keyframes	规定动画
animation-name	动画名称（必须）
animation-duration	规定动画完成一个周期所花费的时间
animation-timing-function	规定动画的速度曲线，默认是“ease”。匀速：linear
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1。无限循环：infinite
animation-direction	规定动画是否在下一周期逆向播放，默认为“normal”。逆向播放：alternate
animation-play-state	规定动画是否正在运行或暂停。默认是“running”。暂停：“paused”
animation-fill-mode	规定动画结束后状态，保持：forwards；回到起始：backwards

3. 3D转换

3.1 移动 translate3d

语法：transform: translate3d(x,y,z) | translateX(n) | translateY(n) | translateZ(n)

3.2 透视 perspective

如果想看到3d效果，必须加透视。透视写在被观察元素的父元素上，且单位是像素。

3.3 旋转 rotate3d

语法：transform: rotateX(角度) | rotateY(角度) | rotateZ(角度) | rotate3d(x,y,z,deg)

3.4 3D呈现 transfrom-style

控制子元素是否开启三维立体空间。flat：（默认）不开启；preserve-3d：开启。代码写给父级，但是影响的是子盒子。（要让页面显示3d效果一定要给父元素加上这个样式）

语法：transform-style: flat | preserve-3d;