先来记忆一下动画相关的知识
animation 动画 帧数 1秒 60副画面
animation-name 动画名称 见名知意
animation-duration 动画时间
animation-delay 动画延迟时间
animation-timing-function 动画速率变化
ease 慢快慢
ease-in 慢入
ease-out 慢出
ease-in-out 慢入慢出
linear 匀速的
cubic-bezier(.36,1.54,.67,1.47)
animation-iteration-count 动画次数
number 123455
infinite 无限次
animation-direction 动画的方向
normal
alternate 先正向 再反向 需要两次 运动
reverse 反向
alternate-reverse 先反向 再正向
animation-fill-mode 决定动画起始结束状态
none 原始状态 => 动画开始 => 原始状态
forwards 原始状态 => 动画开始 => 动画帧的100%
backwards 动画帧0%开始 =>动画开始 => 原始状态处
both 动画帧0%开始 =>动画开始 => 动画帧的100%
animation-play-state 决定动画运行与暂停
running运行
paused 暂停
@keyframes run{
from{width:50px;}
to{width:800px;}
}
效果图
代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="ydj">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>3d动画</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
img{border:0;}
/*
stage 是舞台
face 全部是演员
集合
分配位置 先旋转 面向 正确的方向
translateZ(100px) 取决于 该元素 面向的方面
transform-style:preserve-3d; 让子元素 能在3d空间 占据位置
body perspective:800px; 视野到屏幕的距离
perspective-origin:left top; 看的方位
*/
body{
perspective:800px;
}
.stage{
position:relative;
width:200px;
height:200px;
margin: 200px auto;
box-shadow:0 0 15px #000 inset;
transform-style:preserve-3d;
transition:2s;
/* transform:rotateX(0deg) */;
animation:play 2s infinite alternate;
}
.face{
position:absolute;
width:200px;
height:200px;
background:url("img/1.png") no-repeat center;
font-size: 50px;
line-height: 200px;
text-align: center;
color:#fff;
box-shadow:0 0 15px #f00 inset;
transition:2s;
}
.front{
transform:translateZ(100px);
animation:play1 2s infinite alternate;
}
.rear{
background-image: url("img/2.png");
transform:rotateY(180deg) translateZ(100px);
animation:play2 2s infinite alternate;
}
.left{
background-image: url("img/3.png");
transform:rotateY(-90deg) translateZ(100px);
animation:play3 2s infinite alternate;
}
.right{
background-image: url("img/4.png");
transform:rotateY(90deg) translateZ(100px);
animation:play4 2s infinite alternate;
}
.up{
background-image: url("img/5.png");
transform:rotateX(90deg) translateZ(100px);
animation:play5 2s infinite alternate;
}
.down{
background-image: url("img/6.png");
transform:rotateX(-90deg) translateZ(100px);
animation:play6 2s infinite alternate;
}
/*
.stage:hover{
transform:rotateX(180deg) rotateY(180deg);
}
.stage:hover .front{
transform:translateZ(200px);
}
.stage:hover .rear{
transform:rotateY(180deg) translateZ(200px);
}
.stage:hover .left{
transform:rotateY(-90deg) translateZ(200px);
}
.stage:hover .right{
transform:rotateY(90deg) translateZ(200px);
}
.stage:hover .up{
transform:rotateX(90deg) translateZ(200px);
}
.stage:hover .down{
transform:rotateX(-90deg) translateZ(200px);
} */
@keyframes play{
0%{
transform:rotateX(0deg) rotateY(0deg);
.down{
transform:rotateX(-90deg) translateZ(100px);
}
}
100%{
transform:rotateX(180deg) rotateY(180deg);
.down{
transform:rotateX(-90deg) translateZ(200px);
}
}
}
@keyframes play1{
0%{
transform:translateZ(100px);
}
100%{
transform:translateZ(200px);
}
}
@keyframes play2{
0%{
transform:rotateY(180deg) translateZ(100px);
}
100%{
transform:rotateY(180deg) translateZ(200px);
}
}
@keyframes play3{
0%{
transform:rotateY(-90deg) translateZ(100px);
}
100%{
transform:rotateY(-90deg) translateZ(200px);
}
}
@keyframes play4{
0%{
transform:rotateY(90deg) translateZ(100px);
}
100%{
transform:rotateY(90deg) translateZ(200px);
}
}
@keyframes play5{
0%{
transform:rotateX(90deg) translateZ(100px);
}
100%{
transform:rotateX(90deg) translateZ(200px);
}
}
@keyframes play6{
0%{
transform:rotateX(-90deg) translateZ(100px);
}
100%{
transform:rotateX(-90deg) translateZ(200px);
}
}
</style>
</head>
<body>
<div class="stage">
<div class="face front">前</div>
<div class="face rear">后</div>
<div class="face left">左</div>
<div class="face right">右</div>
<div class="face up">上</div>
<div class="face down">下</div>
</div>
</body>
</html>