css3实现立方体旋转
涉及知识点
css3转换transform
transform-origin: x y z; 定义转换元素的位置 默认50% 50% 0
transform-style:flat | preserve-3d
translate:从当前位置移动 translateX(px) | translateY(px) | translateZ(px)
rotate:给定度数顺时针旋转 rotateX(deg)| rotateY(deg) | rotateZ(deg)
persperctive:定义元素距离试图的距离 以px记
backface-visibility: hidden|visible 定义当前元素不面向屏幕时是否可见 --->注意元素的正反
css3动画animation
1.关键帧:@keyframes name{
0%{ 初始状态}
100%{ 终态} //可以只写中间状态50%{}
}
2.调用动画:animation:name | duration | [ timing-function | delay | iteration-count | direction]
css代码
.wrapper > div{
margin-left: 100px;
position: relative;
float: left;
width: 500px;
height: 500px;
perspective: 5000px;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(20deg) rotateZ(20deg);
animation: round 10s linear infinite;
}
.wrapper-left>div,
.wrapper-right>div {
top: 150px;
left: 150px;
position: absolute;
width: 200px;
height: 200px;
box-sizing: border-box;
opacity: 0.7;
border: 1px solid #000;
float: left;
margin: 0 auto;
text-align: center;
line-height: 200px;
font-size: 30px;
}
.wrapper-right>div{
backface-visibility: hidden;
}
.front {
background-color: bisque;
transform: translateZ(100px);
}
.back{
background-color: brown;
transform: translateZ(-100px) rotateX(180deg);
}
.left{
background-color: chocolate;
transform: translateX(-100px) rotateY(-90deg);
}
.right{
background-color:coral;
transform: translateX(100px) rotateY(90deg);
}
.top{
background-color: cornflowerblue;
transform: translateY(-100px) rotateX(90deg) ;
}
.bottom{
background-color: violet;
transform: translateY(100px) rotateX(-90deg) ;
}
@keyframes round{
0%{
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
100%{
transform: rotateX(360deg) rotateZ(360deg);
}
}
html代码
<div class="wrapper">
<div class="wrapper-left">
<div class="front">1</div>
<div class="back">2</div>
<div class="left">3</div>
<div class="right">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
<div class="wrapper-right">
<div class="front">1</div>
<div class="back">2</div>
<div class="left">3</div>
<div class="right">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</div>
结果如下: