CSS3 立方体翻转效果
分类：实例代码
分享一段代码实例，它实现了立方体翻转效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
*{
margin: 0;
padding: 0;
}
.bigger{
transform-style:preserve-3d;
animation: autoPaly 6s alternate infinite;
animation-delay: 14s;
width: 400px;
height: 400px;
margin: 150px auto;
}
.box{
width: 250px;
height: 250px;
border: 1px dashed red;
margin:100px auto;
position: relative;
transform-style:preserve-3d;
border-radius: 50%;
animation: boxPlay 2s forwards ;
}
.box>div{
width: 100%;
height: 100%;
position: absolute;
text-align: center;
line-height: 250px;
font-size:60px;
color:#daa520;
}
.left{
background-color: rgba(255,0, 0,1);
animation: leftPlay 2s forwards;
animation-delay: 2s;
}
.right{
background-color: rgba(0, 255, 0, 0.7);
animation: rightPlay 2s forwards;
animation-delay: 4s;
}
.forward{
background-color:rgba(0, 255, 255, 0.7);
animation: forwardPlay 2s forwards;
animation-delay: 6s;
}
.back{
background-color:rgba(0, 0, 255, 0.7);
animation: backPlay 2s forwards;
animation-delay: 8s;
}
.up{
background-color:rgba(255, 0, 255, 0.7);
animation: upPlay 2s forwards;
animation-delay: 10s;
}
.down{
background-color:rgba(105, 178, 35, 0.7);
animation: downPlay 2s forwards;
animation-delay: 12s;
}
@keyframes boxPlay {
0%{
transform: rotateY(0deg) rotateX(0deg);
}
100%{
transform: rotateY(-20deg) rotateX(30deg);
}
}
@keyframes leftPlay {
0%{
transform: translateX(0px) rotateY(0deg);
background-color: rgba(255,0, 0,1);
}
50%{
transform: translateX(-125px) rotateY(0deg);
background-color: rgba(255,0, 0,.8);
}
75%{
transform: translateX(-125px) rotateY(0deg);
background-color: rgba(255,0, 0,7);
}
100%{
transform: translateX(-125px) rotateY(-90deg);
background-color: rgba(255,0, 0,.6);
}
}
@keyframes rightPlay {
0%{
transform: translateX(0px) rotateY(0deg);
}
50%{
transform: translateX(125px) rotateY(0deg);
}
75%{
transform: translateX(125px) rotateY(0deg);
}
100%{
transform: translateX(125px) rotateY(90deg);
}
}
@keyframes forwardPlay {
0%{
transform: translateY(0px) rotateX(0deg);
}
50%{
transform: translateY(125px) rotateY(0deg);
}
75%{
transform: translateY(125px) rotateY(0deg);
}
100%{
transform: translateY(125px) rotateX(-90deg);
}
}
@keyframes backPlay {
0%{
transform: translateY(0px) rotateX(0deg);
}
50%{
transform: translateY(-125px) rotateY(0deg);
}
75%{
transform: translateY(-125px) rotateY(0deg);
}
100%{
transform: translateY(-125px) rotateX(90deg);
}
}
@keyframes upPlay {
0%{
transform: translateZ(0px);
}
100%{
transform: translateZ(125px);
}
}
@keyframes downPlay {
0%{
transform: translateZ(0px);
}
100%{
transform: translateZ(-125px);
}
}
@keyframes autoPaly {
0%{
transform: rotateY(0deg) rotateX(0deg);
}
100%{
transform: rotateX(600deg) rotateY(1200deg);
}
}
</style>
</head>
<body>
<div class="bigger">
<div class="box">
<div class="up">上</div>
<div class="down">下</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="forward">前</div>
<div class="back">后</div>
</div>
</div>
</body>
</html>
CSS3 立方体翻转效果，这样的场景在实际项目中还是用的比较多的，关于CSS3 立方体翻转效果就介绍到这了。
CSS3 立方体翻转效果属于前端实例代码，有关更多实例代码大家可以查看。