CSS3实现立方体旋转
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>立方体旋转</title> 6 ????<style> 7 ????????.box{ 8 ????????????width: 250px; 9 ????????????height: 250px;10 ????????????border: 1px dashed red;11 ????????????margin:100px auto;12 ????????????position: relative;13 ????????????transform-style: preserve-3d;14 ????????????border-radius: 50%;15 ????????????/*transform: rotateX(30deg) rotateY(-30deg);*/16 17 ???????????animation: gun 8s linear infinite;18 ????????}19 ????????.box>div{20 ????????????width: 100%;21 ????????????height: 100%;22 ????????????position: absolute;23 ????????????text-align: center;24 ????????????line-height: 250px;25 ????????????font-size: 60px;26 ????????????color: green;27 ????????}28 ????????.left{29 ????????????background-color: rgba(255,0,0,0.3);30 ????????????/*变换中心*/31 ???????????transform-origin: left;32 ????????????/*变换*/33 ???????????transform:rotateY(90deg) translateX(-125px);34 ????????}35 ????????.right{36 ????????????background-color: rgba(0,0,255,0.3);37 ???????????transform-origin: right;38 ???????????transform: rotateY(90deg) translateX(125px);39 ????????}40 ????????.forward{41 ????????????background-color: rgba(0,255,255,0.3);42 ???????????transform: translateZ(125px);43 ????????}44 ????????.back{45 ????????????background-color: rgba(255,255,0,0.3);46 ???????????transform: translateZ(-125px);47 ????????}48 ????????.up{49 ????????????background-color: rgba(99,66,33,0.3);50 ???????????transform: rotateX(90deg) translateZ(125px);51 ????????}52 ????????.down{53 ????????????background-color: rgba(255,0,255,0.3);54 ???????????transform: rotateX(-90deg) translateZ(125px);55 ????????}56 ???????@keyframes gun {57 ????????????0%{58 ????????????????transform: rotateX(0deg) rotateY(0deg);59 ????????????}60 ????????????100%{61 ????????????????transform: rotateX(360deg) rotateY(360deg);62 ????????????}63 ????????}64 ????</style>65 </head>66 <body>67 ????<div class="box">68 ????????<div class="up">上</div>69 ????????<div class="down">下</div>70 ????????<div class="left">左</div>71 ????????<div class="right">右</div>72 ????????<div class="forward">前</div>73 ????????<div class="back">后</div>74 ????</div>75 </body>76 </html>
运行效果：
第102天：CSS3实现立方体旋转
原文地址：http://www.cnblogs.com/le220/p/7956453.html