CSS3实现3D魔方翻转网页动画特效
CSS3实现3D魔方翻转网页动画特效
<div class="outer">
<div class="inter">
<div class="font">
<div class="font1">1div>
<div class="font2">2div>
<div class="font3">3div>
<div class="font4">4div>
<div class="font5">5div>
<div class="font6">6div>
<div class="font7">7div>
<div class="font8">8div>
<div class="font9">9div> div>
<div class="after">
<div class="after1">1div>
<div class="after2">2div>
<div class="after3">3div>
<div class="after4">4div>
<div class="after5">5div>
<div class="after6">6div>
<div class="after7">7div>
<div class="after8">8div>
<div class="after9">9div>
div>
<div class="left">
<div class="left1">1div>
<div class="left2">2div>
<div class="left3">3div>
<div class="left4">4div>
<div class="left5">5div>
<div class="left6">6div>
<div class="left7">7div>
<div class="left8">8div>
<div class="left9">9div>
div>
<div class="right">
<div class="right1">1div>
<div class="right2">2div>
<div class="right3">3div>
<div class="right4">4div>
<div class="right5">5div>
<div class="right6">6div>
<div class="right7">7div>
<div class="right8">8div>
<div class="right9">9div>
div>
<div class="up">
<div class="up1">1div>
<div class="up2">2div>
<div class="up3">3div>
<div class="up4">4div>
<div class="up5">5div>
<div class="up6">6div>
<div class="up7">7div>
<div class="up8">8div>
<div class="up9">9div>
div>
<div class="down">
<div class="down1">1div>
<div class="down2">2div>
<div class="down3">3div>
<div class="down4">4div>
<div class="down5">5div>
<div class="down6">6div>
<div class="down7">7div>
<div class="down8">8div>
<div class="down9">9div>
div>
div>
div>
.css样式文件
*{
margin: 0;
padding: 0;
}
div.outer{
position: absolute;
width: 200px;
height: 200px;
top:50%;
left:45%;
/*border: 2px solid azure;*/
/*background-color: bisque;*/
transform-style: preserve-3d;
}
div.inter{
transform-style: preserve-3d;
animation: change 6s linear infinite;
}
.inter>div{
width: 308px;
height:308px;
text-align: center;
line-height: 100px;
/*background-color: red;*/
position: absolute;
top: 50%;
left:50%;
}
div.font{
margin-left: -154px;
margin-top: -154px;
/*background-color:darkgreen;*/
position: absolute;
transform: translateZ(158px);
border: 5px solid blue;
}
.font1,.after1,.left1,.right1,.up1,.down1{
position: absolute;
left: 2px;
top: 2px;
}
.font2,.after2,.left2,.right2,.up2,.down2{
position: absolute;
left: 104px;
top: 2px;
}
.font3,.after3,.left3,.right3,.up3,.down3{
position: absolute;
left: 206px;
top: 2px;
}
.font4,.after4,.left4,.right4,.up4,.down4{
position: absolute;
left: 2px;
top: 104px;
}
.font5,.after5,.left5,.right5,.up5,.down5{
position: absolute;
left: 104px;
top: 104px;
}
.font6,.after6,.left6,.right6,.up6,.down6{
position: absolute;
left: 206px;
top: 104px;
}
.font7,.after7,.left7,.right7,.up7,.down7{
position: absolute;
left: 2px;
top: 206px;
}
.font8,.after8,.left8,.right8,.up8,.down8{
position: absolute;
left: 104px;
top: 206px;
}
.font9,.after9,.left9,.right9,.up9,.down9{
position: absolute;
left: 206px;
top: 206px;
}
div.font>div{
width: 100px;
height: 100px;
border-radius: 5px;
background-color: blueviolet;
}
div.after{
margin-left: -154px;
margin-top: -154px;
border: 5px solid darkgreen;
position: absolute;
transform: translateZ(-158px);
}
div.left{
margin-left: -154px;
margin-top: -154px;
position: absolute;
transform: rotateY(90deg) translateZ(-158px);
border: 5px solid chartreuse;
}div.right{
margin-left: -154px;
margin-top: -154px;
position: absolute;
transform: rotateY(90deg) translateZ(158px);
border: 5px solid rosybrown;
}
div.up{
margin-left: -154px;
margin-top: -154px;
position: absolute;
transform: rotateX(90deg) translateZ(158px);
border: 5px solid rosybrown;
}
div.down{
margin-left: -154px;
margin-top: -154px;
position: absolute;
transform: rotateX(90deg) translateZ(-158px);
border: 5px solid crimson;
}
div.after>div{
width: 100px;
height: 100px;
border-radius: 5px;
background-color:darkgreen;
}
div.left>div{
width: 100px;
height: 100px;
border-radius: 5px;
background-color:chartreuse;
}
div.right>div{
width: 100px;
height: 100px;
border-radius: 5px;
background-color:rosybrown;
}
div.up>div{
width: 100px;
height: 100px;
border-radius: 5px;
background-color:orange;
}
div.down>div{
width: 100px;
height: 100px;
border-radius: 5px;
background-color:crimson;
}
@keyframes change {
0% {
transform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
}
33% {
transform: translateZ(-10em) rotateX(120deg) rotateY(240deg);
}
66% {
transform: translateZ(-10em) rotateX(240deg) rotateY(480deg);
}
100% {
transform: translateZ(-10em) rotateX(360deg) rotateY(720deg);
}
}