2d，3d，动画 ，过渡

1.tanslate（移动）

实例：

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

注意： translateX(x)和translateY(y),translateZ(z)不能同时出现，不然是会作用于最后一个

2.rotate（旋转）

实例：

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

注意： rotateX(x)和rotateY(y),rotateZ(z)不能同时出现，不然是会作用于最后一个

3.scale （缩放）

实例：

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

注意：…和上面一样不能同时使用

4.skew （倾斜）

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

注意：…和上面一样不能同时使用

---

1.transform-style:preserve-3d; (3d转换）

默认是平面
实例：

#div2
{
	padding:50px;
	position: absolute;
	border: 1px solid black;
	background-color: red;
	transform: rotateY(60deg);
	transform-style: preserve-3d;
	-webkit-transform: rotateY(60deg); /* Safari and Chrome */
	-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}

#div3
{
	padding:40px;
	position: absolute;
	border: 1px solid black;
	background-color: yellow;
	transform: rotateY(-60deg);
	-webkit-transform: rotateY(-60deg); /* Safari and Chrome */

这样我们就是实现了3d的转换，在制作立体图形转动效果必须用到

2.transform-origin （设置旋转中心点）

默认值： 50% 50% 0
实例：

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
}

一般和transform-style:preserve-3d; (3d转换）一起实现立体图形的旋转

---

过渡

属性	说明
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

transition-timing-function 的值还有哪些?

• linear 匀速
• ease-in 慢开始
• ease-out 慢结束
• ease-in-out 慢开始慢结束

---

动画

属性	说明
animation-name	规定 @keyframes 动画的名称。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-play-state	指定动画是否正在运行或已暂停。

animation-direction 的值

• normal 正常播放
• reverse 反向播放
• alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
• alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。