css动画——3D效果
Internet Explorer 10 和Firefox 支持3D，Chrome和Safari需要-webkit-，Opera和ie9仍然不支持3D转换它只支持2D转换
一、3D转换
3D翻转方法rotate
- transform:rotateX(30deg) 沿X轴翻转30°
- transform:rotateY(30deg) 沿Y轴翻转30°
- transform:rotateZ(30deg) 沿Z轴翻转30°
注：Internet Explorer和Opera不支持 rotateX， rotateY， rotateZ
3D位移translate
-transform:translate3d（30px,30px.800px）X轴移动30px，Y轴移动30px，Z轴移动800px
- transform:translateX(30px) translateY(30px) translateZ(800px)
- transform:translateZ(800px) translate(30px,30px)
3D视距perspective
元素要使用3D效果需要perspective属性配合
- < p >< /p >
- p{width:100px;height:100px;transform:perspective(200px) translate3d(0,0,-50px);background:#f0f;}
- < div >< p >< /p >< /div >
- div{perspective:200px}
- p{width:100px;height:100px;transform:translate3d(0,0,-50px);background:#f0f;}
3D转换（3D缩放翻转）scaleZ
- 父框设置
- perspective:1200px（3D视距）
- transform-style:preserve-3d（3D视角）
- （子元素保持3D位置）
- transform-origin:left / top / right / bottom
- 翻转位置
例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D视距-正方体</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
div{transition:3s;transform-style:preserve-3d;}
ul{ width:200px; height:200px; margin:200px auto; position:relative;transform-style:preserve-3d;transform:rotateX(45deg) rotateY(45deg);}
ul li{ width:200px; height:200px; position:absolute;opacity:.5; }
ul li.top{ background:#ff0; transform:translateY(100px) rotateX(90deg);}
ul li.bottom{ background:#f00;transform:translateY(100px) rotateX(90deg);}
ul li.before{ background:#0f0;transform:translateZ(100px);}
ul li.after{ background:#f99; transform:translateZ(-100px);}
ul li.left{ background:#9f9;transform:translateX(-100px) rotateY(90deg);}
ul li.right{ background:#00f;transform:translateX(100px) rotateY(90deg);}
div:hover{ transform:rotateY(360deg);}
</style>
</head>
<body>
<div>
<ul>
<li class="top"></li>
<li class="bottom"></li>
<li class="before"></li>
<li class="after"></li>
<li class="left"></li>
<li class="right"></li>
</ul>
</div>
</body>
</html>
3D导航
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D导航</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
ul{width:200px; height:200px; margin:200px auto;}
ul li{width:200px; height:200px;position:relative; transform-style:preserve-3d; transition:.5s; }
ul li i{position:absolute;width:200px; height:200px;}
ul li i img{ width:200px; height:200px;}
ul li i:nth-child(1){ transform:translateZ(100px);}
ul li i:nth-child(2){ transform:translateY(100px) rotateX(-90deg);}
ul li i:nth-child(3){ transform:translateZ(-100px) rotateX(180deg);}
ul li:hover{ transform:rotateX(90deg);}
ul li:active{ transform:rotateX(180deg);}
</style>
</head>
<body>
<ul>
<li>
<i><img src="1 .jpg"/></i>
<i><img src="2.jpg"/></i>
<i><img src="1 .jpg"/></i>
</li>
</ul>
</body>
</html>
二、3D动画
创建动画 @keyframes
语法：@keyframes zidingyi {from {background:yellow;}to{background:green;}to{background:red;} }
注：当使用@keyframes创建动画时，要把它捆绑在某个选择器的动画属性上，否则不hi产生动画效果。通过规定至少以下两项css3动画属性，即可将动画绑定到选择器动画属性：规定动画的名称、规定动画的时长。
- forwards保留最后一针关键帧
- infinite无限播放
- alternate倒带
- keyframes是从0%到100%变化的，他们后面的属性要与前面的一致
动画属性animation
| animation-name | 动画名 |
|---|---|
| animation-duration | 时间，默认0 |
| animation-timing-function | 曲线，默认ease |
| animation-delay | 延时，默认0 |
| animation-iteration-count | 播放次数，默认1 |
| animation-direction | 周期后是否播放 |
| animation-play-state | 是否暂停，默认running |
| animation-fill-mode | 动画结束后的状态 |
例：animation:name 5s linear 2s infinite alternate
关键帧：from to 0% 100%
案例
方块移动效果：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<style>
//- forwards保留最后一针关键帧
//- infinite无限播放
//- alternate倒带
//- keyframes是从0%到100%变化的，他们后面的属性要与前面的一致
*{ margin:0; padding:0;}
div{ width:500px; height:500px; box-shadow:0 0 5px #000; margin:100px auto; position:relative; animation:dafangkuai 2s;}
div .p1{ width:100px; height:100px; background:#99f; position:absolute; animation:fangkuai 2s 5 linear forwards ;}
div .p2{ width:100px; height:100px; background:#00f; position:absolute; animation:xiaofangkuai 2s infinite alternate;}
@keyframes fangkuai{
0%{ left:0;top:0;}
25%{left:400px;top:0;}
50%{left:400px;top:400px;}
75%{left:0;top:400px;}
100%{left:200px;top:200px;}
}
@keyframes xiaofangkuai{
0%{ left:0;top:0;}
25%{left:100px;top:400px;}
50%{left:200px;top:0;}
75%{left:300px;top:400px;}
100%{left:400px;top:0px;}
}
@keyframes dafangkuai{
0%{ left:50px;top:50px;}
100%{left:400px;top:0;}
}
</style>
</head>
<body>
<div class="box">
<p class="p1"></p>
<p class="p2"></p>
</div>
</body>
</html>
水波纹效果：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>波纹</title>
<style>
*{ margin:0; padding:0;}
dl{ width:200px; height:200px; margin:100px auto; position:relative;}
dl dd{ width:200px; height:200px; position:absolute;border-radius:50%; box-sizing:border-box;}
dl:hover dd:nth-child(1){ border:2px solid #F00; animation:bowen 3s infinite linear;}
dl:hover dd:nth-child(2){ border:2px solid #F90; animation:bowen 3s .4s infinite linear;}
dl:hover dd:nth-child(3){ border:2px solid #FF0; animation:bowen 3s .8s infinite linear;}
dl:hover dd:nth-child(4){ border:2px solid #0F0; animation:bowen 3s 1.2s infinite linear;}
dl:hover dd:nth-child(5){ border:2px solid #9F0; animation:bowen 3s 1.6s infinite linear;}
dl:hover dd:nth-child(6){ border:2px solid #00F; animation:bowen 3s 2s infinite linear;}
dl:hover dd:nth-child(7){ border:2px solid #F0F; animation:bowen 3s 2.4s infinite linear;}
dl dt{border-radius:50%;width:200px; height:200px; background:#000; color:#fff; font:700 40px/5 ""; text-align:center;position:absolute;}
@keyframes bowen{
0%{ transform:scale(1,1); opacity:1;}
100%{ transform:scale(2,2); opacity:0;}
}
</style>
</head>
<body>
<dl>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dt>划过我</dt>
</dl>
</body>
</html>
旋转墙:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旋转墙</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
div{perspective:800px; }
div ul{width:200px; height:200px;position:relative; margin:100px auto; transform-style:preserve-3d; animation:xunzhuan 5s linear infinite ;}
div ul li{width:200px; height:200px; position:absolute;transition:.5s;}
div ul li:nth-child(1){ transform:translateZ(300px);}
div ul li:nth-child(2){ transform:rotateY(45deg) translateZ(300px);}
div ul li:nth-child(3){ transform:rotateY(90deg) translateZ(300px);}
div ul li:nth-child(4){ transform:rotateY(135deg) translateZ(300px);}
div ul li:nth-child(5){ transform:rotateY(180deg) translateZ(300px);}
div ul li:nth-child(6){ transform:rotateY(225deg) translateZ(300px);}
div ul li:nth-child(7){ transform:rotateY(270deg) translateZ(300px);}
div ul li:nth-child(8){ transform:rotateY(315deg) translateZ(300px);}
div ul li img{width:200px; height:200px;}
div:hover ul{ animation-play-state:paused;}
@keyframes xunzhuan{
0%{ transform:rotateX(-15deg) rotateY(0)}
100%{transform:rotateX(-15deg) rotateY(360deg)}
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="1 .jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="1 .jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="1 .jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="1 .jpg"/></li>
<li><img src="2.jpg"/></li>
</ul>
</div>
</body>
</html>
