1 3D转换
转换是使元素改变形状、尺寸和位置的一种效果
1-1 rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
div {
width: 100px;
height: 100px;
background-color: #0F0;
border: 1px solid
}
.div { transform: rotateX(50deg) }
运行效果：
rotateY() 旋转
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
.div { transform: rotateY(50deg) }
运行效果：
rotateZ() 旋转
通过 rotateZ() 方法，元素围绕其 Z 轴以给定的度数进行旋转。
.div { transform: rotateZ(50deg) }
运行效果：
1-2 转换属性
transform 向元素应用 2D 或 3D 转换。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
语法：transform: none|transform-functions;
transform-origin 允许你改变被转换元素的位置。
设置旋转元素的基点位置
transform-origin 属性允许您改变被转换元素的位置
语法：transform-origin:x-axisy-axisz-axis;
.div {
width: 200px;
height: 200px;
margin: 50px;
border: 1px solid
}
.div1 {
width: 100px;
height: 100px;
background-color: #0F0;
transform: rotateZ(50deg);
transform-origin: 30% 60%
}
运行效果：
transform-style 规定被嵌套元素如何在 3D 空间中显示。
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
.div {
position: relative;
border: 1px solid;
margin: 100px;
padding:10px;
width: 200px;
height: 200px
}
.div1 {
position: absolute;
padding: 50px;
background-color: #F0F;
border: 1px solid;
transform: rotateY(30deg);
transform-style: preserve-3d
}
.div2 {
position: absolute;
padding: 40px;
background-color: #0F0;
transform: rotateY(10deg);
border: 1px solid
}
运行效果
perspective规定 3D 元素的透视效果。
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
.div {
position: relative;
border: 1px solid;
margin: 100px;
padding:10px;
width: 200px;
height: 200px;
perspective: 100px
}
.div1 {
position: absolute;
padding: 50px;
background-color: #F0F;
border: 1px solid;
transform: rotateY(30deg)
}
perspective-origin 规定 3D 元素的底部位置。
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
.div {
position: relative;
border: 1px solid;
margin: 100px;
padding:10px;
width: 200px;
height: 200px;
perspective: 100px;
perspective-origin: 10% 30%
}
.div1 {
position: absolute;
padding: 50px;
background-color: #F0F;
border: 1px solid;
transform: rotateY(30deg)
}
运行效果
backface-visibility 定义元素在不面对屏幕时是否可见。
语法：backface-visibility: visible（可见）|hidden（隐藏）;
2 过度
2-1 浏览器支持如何工作
css3过渡是元素从一种样式逐渐改变为另一种的效果
要实现这一点，必须规定两项内容：
一，规定你希望把效果添加到那个css属性上
二，规定效果的时长
div {
width: 100px;
height: 100px;
background-color: #F0000F;
transition: width 3s
}
div:hover { width: 300px }
运行效果
2-2 多项改变
div {
width: 100px;
height: 100px;
background-color: #F0000F;
transition: width 3s, height 3s, background-color 3s, transform 3s
}
div:hover {
width: 300px;
height: 300px;
background-color: yellow;
transform: rotate(360deg)
}
运行效果
鼠标悬浮时触发效果，原图会在规定时间运行完毕，鼠标离开，图会在相同时间内恢复原图！若未规定时间，触发的的时候便完成效果
2-3 过渡属性
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
