笔记：
2D变换
transform
位移
translateX() translateY()
简写：translate(X值，Y值) 正值向右，负值向左
旋转 rotate()
rotate(？deg) 括号中为角度值 正值是顺时针旋转，负值是逆时针旋转
缩放 scale()
scale() 括号中为数值，可以为浮点数 如大于1是放大效果，小于1是缩小效果
变形（斜切）
skewX() skewY()
简写：skew(X轴斜切角度，Y轴斜切角度)
body:hover div{ transform:translate(100px,100px) rotate(30deg) scale(1.5) skew(40deg,40deg) }
解析顺序：根据transform内写的顺序进行解析。
变换原点：
transform-orign:
left right top bottom
center（默认） 当设置相应的值后，会按照相应设置的值发生变换。
3D变换
3D效果：首先给需要进行3D变换元素的父级添加3D环境和景深。
写法：
transform-style:preserve-3d; <!--添加3D环境-->
perspective:数值; 如：300px; <!--景深--> 数值较低的话无效果
transform
rotateX 沿X轴旋转：正值向右翻转，负值向左翻转
rotateY 沿y轴旋转：正值向右翻转，负值向左翻转
rotateZ 沿z轴旋转：正值向屏幕外，负值向屏幕内
translateX 沿X轴位移：正值向右，负值向左
translateY 沿y轴位移：正值向下，负值向上
translateZ 沿z轴位移：正值向屏幕外，负值向屏幕内
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D正方形实例</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
padding: 100px;
margin: 100px auto;
perspective:300px;
} #val{
width: 100px;
height: 100px;
position: relative;/*设置相对定位*/
transform-style: preserve-3d;/*给父级设置3D环境*/
transform-origin: center center -50px;/*沿中轴线转动*/
transition: 1s;/*响应时间1s*/
}
#val div{
position: absolute;/*设置绝对定位*/
width: 100px;
height: 100px;
background: blue;
text-align: center;
font: 40px/100px "微软雅黑";
}
#val div:nth-of-type(1){
background: yellow;
}
#val div:nth-of-type(2){
left:-100px;/*定位 沿X轴向左移动100px*/
background: red;
transform-origin: right;/*位移点为右边*/
transform:rotateY(-90deg);/*向Y轴翻转向左90度*/
}
#val div:nth-of-type(3){
top:-100px;/*定位 沿Y轴向上移动100px*/
background:pink;
transform-origin: bottom;/*位移点为下边*/
transform:rotateX(90deg); /* 沿X轴向内翻转90度*/
}
#val div:nth-of-type(4){
left:100px;
background: #FF6600;
transform-origin: left;
transform:rotateY(90deg);
}
#val div:nth-of-type(5){
top:100px;
background: #1883BA;
transform-origin: top;
transform:rotateX(-90deg);
}
#val div:nth-of-type(6){
background: gray;
transform:translateZ(-100px) rotateX(-180deg); /*翻转180度,不然数字6为镜像显示*/
}
#val:hover {
transform: rotateY(360deg) ; /*鼠标停留,X轴旋转360度,Y轴旋转30度*/
}
</style>
</head>
<body>
<div id="box">
<div id="val">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>
实现效果：鼠标停留，立方体旋转。
