元素旋转、变形中心点、背面可见、图片翻面、animation动画、人物走路动画

元素旋转

旋转方向判断

1、X轴向右、Y轴向下、Z轴向屏幕外

2、让轴向对着自己，顺时针方向就是该轴向的旋转方向

设置盒子按3D空间显示

transform-style: preserve-3d;

transform: perspective(800px) rotateY(0deg);

默认沿Z轴旋转

transform: rotate(45deg);

perspective设置透视距离，经验数值800比较符合人眼的透视效果

transform: perspective(800px) rotateX(45deg);

变形中心点

背面可见

图片翻面

以下两句是为了演示图片和文字层重叠的效果

transform-style: preserve-3d;

transform: perspective(800px) rotateY(45deg);初始旋转45度

transform: translateZ(10px);

初始文字浮起10像素方便查看图片与文字分层的效果

初始文字翻转，鼠标移入时才翻正显示

transform: translateZ(2px) rotateY(180deg);

鼠标移入时图片翻为背面隐藏

.con:hover .pic{

transform: perspective(800px) rotateY(180deg);

}

鼠标移入时文字翻为正面显示

.con:hover .info{

transform: perspective(800px) rotateY(0deg);

}

animation动画

动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态

infinite不限制次数

alternate动画结束后返回，返回也算次数

animation-fill-mode 动画前后的状态

forwards动画完成保持在最后一帧

backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）

both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）

动画暂停

animation-play-state: paused;

动画运行

animation-play-state: running;

定义一个动画，名称为moving

@keyframes moving{

初始状态

from{

width: 200px;

}

结束状态

to{

width: 500px;

}

人物走路动画