CSS-3D动画笔记
3d
在2d的基础上添加 z 轴的变化
3d 位移：在2d的基础上添加 translatez（），或者使用translate3d（）
translatez（）：以方框中心为原点，变大
3d 缩放：在2d的基础上添加 scalez（），或者使用scale3d（）
scalez（）和 scale3d（）函数单独使用时没有任何效果
3d 透视：perspective 规定3d元素的透视效果
可以取值为none或不设置，这种情况下说明没有透视效果
取值越小，3d效果越明显
3d背面可见：backface-visibility 定义元素在不面对屏幕时是否可见
transform-style：规定被嵌套元素在3d空间中显示
transform-style：flat； 子元素将不保留其 3d 位置
transform-style：preserve-3d； 子元素将保留其3d位置
动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。
css中通过 @keyframes 规则是创建动画，可以改变任意多的样式任意多的次数。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个css3的动画属性绑定向一个选择器：
规定动画的名称
规定动画的时长
语法：@keyframes stylename {
keyframes-selector{css-style;}
}
keyframes-selector：可以用百分比来规定变化发生的时间
也可以用关键词 "from" 和 "to"
0% 是动画的开始，100% 是动画的完成
3d示例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
.box {width: 600px; height: 600px; margin: 0 auto; position: relative; perspective: 800px;}
.box ul {list-style: none; width: 300px; height: 300px; transition: all 2s;
position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform-style: preserve-3d;}
.box ul li {width: 300px; height: 300px; text-align: center; line-height: 100px;
position: absolute; font-size: 36px;}
.box ul li:nth-child(1) {background: rgba(255, 0, 255, 0.5); transform: translatey(-150px) rotatex(90deg);}
.box ul li:nth-child(2) {background: rgba(192, 157, 81, 0.5); transform: translatey(150px) rotatex(-90deg);}
.box ul li:nth-child(3) {background: rgba(35, 130, 142, 0.5); transform: translatex(-150px) rotatey(-90deg);}
.box ul li:nth-child(4) {background: rgba(142, 35, 35, 0.5); transform: translatex(-150px) rotatey(90deg);}
.box ul li:nth-child(5) {background: rgba(121, 17, 240, 0.5); transform: translatez(150px);}
.box ul li:nth-child(6) {background: rgba(47, 142, 35, 0.5); transform: translatez(-150px) rotatey(180deg);}
.box ul:hover {transform:rotatex(360deg) rotatey(360deg);}
</style>
</head>
<body>
<div class="box">
<ul>
<li>上</li>
<li>下</li>
<li>左</li>
<li>右</li>
<li>前</li>
<li>后</li>
</ul>
</div>
</body>
</html>
结果
动画示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
.box {
width:100px;
height:100px;
background:red;
position:relative;
animation:animationstyle 5s linear 2s infinite alternate;
}
@keyframes animationstyle
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
结果
上一篇： WebStorm出现中文乱码解决代码