前言
今天总结了css动画属性相关知识,也写了一些前言,现在不说不多bb了。主要是为对先前总结的知识(css动画属性大集合),来个小demo来加深印象。
主要知识点
1.在祖先元素设置井深属性-perspective
2.为需要实现3d变形转换的元素设置3d场景:transform-style: preserve-3d;
效果图如下:
实现代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width: 100px;
height:100px;
margin:40px auto;
/*设置井深、透视*/
perspective: 500px;
/*perspective-origin: top;*/
}
.cube{
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
animation: wrap 3s 5s infinite forwards;
}
@keyframes wrap{
to{
transform:rotate3d(1,1,1,360deg);
}
}
.item{
width:100px;
height: 100px;
background:rgba(255,255,0,.5);
font-size:80px;
text-align:center;
line-height: 100px;
position: absolute;
top:0;
left: 0;
transform-style: preserve-3d;
}
.item1{
z-index: 5;
animation: item1 1s forwards;
}
@keyframes item1{
to{
transform-origin: top;
transform: rotateX(90deg);
}
}
.item2{
z-index: 4;
animation: item2 1s 1s forwards;
}
@keyframes item2{
to{
transform-origin: left;
transform: rotateY(-90deg);
}
}
.item3{
z-index: 3;
animation: item3 1s 2s forwards;
}
@keyframes item3{
to{
transform-origin: right;
transform: rotateY(90deg);
}
}
.item4{
z-index: 2;
animation: item4 1s 3s forwards;
}
@keyframes item4{
to{
transform-origin: center bottom;
transform: rotateX(-90deg);
}
}
.item5{
z-index: 1;
animation: item5 1s 4s forwards;
}
@keyframes item5{
to{
transform: translate3d(0,0,100px);
}
}
.item6{
z-index: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="cube">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
<div class="item4 item">4</div>
<div class="item5 item">5</div>
<div class="item6 item">6</div>
</div>
</div>
</body>
</html>
生活寄语
爱代码,爱上生活!