速度曲线调节
animation-timing-function：规定动画的速度曲线，默认是“ease”
其他值：
linear 动画从头到尾的速度都是相同的。匀速。
ease 默认。动画以低俗开始，然后加快，在结束前变慢。
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
steps() 指定了时间函数中的间隔数量（步长）
CSS3 3D转换
3D特点：近大远小、物体后面遮挡不可见
三维坐标系：指立体空间，由三个轴共同组成。
x轴水平向右
y轴垂直向下
z垂直指屏幕【往外面是正值，往里面是负值】
最常用：3D位移和3D旋转
3D移动translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px);【一般用px单位】【为0时，即物体在屏幕上，加了perspective也改变不了看到的大小】
transform:translate3d(x,y,z);【xyz不能省略，没有就写0】
【不能分开了，但又写在一个元素里面，都是transform，会被覆盖哦】
透视 perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的。
-如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面上）
-模拟人类的视觉位置，可认为安排一只眼睛去看
-透视我们也称为视距：视距就是人的眼睛到屏幕的距离
-距离视觉点越近的在电脑平面成像越大，越远成像越小（近大远小）
-透视的单位是像素
【透视写在被观察元素的父盒子上面】
d：就是视距，视距是一个距离人的眼睛到屏幕的距离。
z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。
补充：
通过hover控制其他块的样式
（1）控制子元素的样式
<style>
h1:hover p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网
<p>hover的用法</p>
</h1>
（2）控制兄弟元素的样式
‘+’ 控制同级元素（兄弟元素）
<style>
h1:hover+p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>
（3）控制就近元素的样式
‘～’ 控制就近元素
<style>
h1:hover~p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>
translateZ
