CSS3实现3D魔方翻转网页动画特效
<link rel="stylesheet" type="text/css" href="square.css">
<body><div class="outer"><div class="inter"><div class="font"><div class="font1">1</div><div class="font2">2</div><div class="font3">3</div><div class="font4">4</div><div class="font5">5</div><div class="font6">6</div><div class="font7">7</div><div class="font8">8</div><div class="font9">9</div>
</div><div class="after"><div class="after1">1</div><div class="after2">2</div><div class="after3">3</div><div class="after4">4</div><div class="after5">5</div><div class="after6">6</div><div class="after7">7</div><div class="after8">8</div><div class="after9">9</div></div><div class="left"><div class="left1">1</div><div class="left2">2</div><div class="left3">3</div><div class="left4">4</div><div class="left5">5</div><div class="left6">6</div><div class="left7">7</div><div class="left8">8</div><div class="left9">9</div></div><div class="right"><div class="right1">1</div><div class="right2">2</div><div class="right3">3</div><div class="right4">4</div><div class="right5">5</div><div class="right6">6</div><div class="right7">7</div><div class="right8">8</div><div class="right9">9</div></div><div class="up"><div class="up1">1</div><div class="up2">2</div><div class="up3">3</div><div class="up4">4</div><div class="up5">5</div><div class="up6">6</div><div class="up7">7</div><div class="up8">8</div><div class="up9">9</div></div><div class="down"><div class="down1">1</div><div class="down2">2</div><div class="down3">3</div><div class="down4">4</div><div class="down5">5</div><div class="down6">6</div><div class="down7">7</div><div class="down8">8</div><div class="down9">9</div></div></div></div></body>
.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);}}
