@-webkit-keyframes spin { 0% { -webkit-transform:rotateY(0deg); transform:rotateY(0deg) } 100% { -webkit-transform:rotateY(360deg); transform:rotateY(360deg) } }@-moz-keyframes spin { 0% { -moz-transform:rotateY(0deg); transform:rotateY(0deg) } 100% { -moz-transform:rotateY(360deg); transform:rotateY(360deg) } }@-ms-keyframes spin { 0% { -ms-transform:rotateY(0deg); transform:rotateY(0deg) } 100% { -ms-transform:rotateY(360deg); transform:rotateY(360deg) } }@-o-keyframes spin { 0% { -o-transform:rotateY(0deg); transform:rotateY(0deg) } 100% { -o-transform:rotateY(360deg); transform:rotateY(360deg) } }@keyframes spin { 0% { transform:rotateY(0deg) } 100% { transform:rotateY(360deg) } }.stage { width:300px; height:300px; margin:15px auto; position:relative; -webkit-perspective:300px; -moz-perspective:300px; -ms-perspective:300px; -o-perspective:300px; perspective:300px; } .container { top:50%; left:50%; margin:-100px 0 0 -100px; position:absolute; -webkit-transform:translateZ(-100px); -moz-transform:translateZ(-100px); -ms-transform:translateZ(-100px); -o-transform:translateZ(-100px); transform:translateZ(-100px); -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; } .container:hover { -moz-animation:spin 5s linear infinite; -o-animation:spin 5s linear infinite; -webkit-animation:spin 5s linear infinite; animation:spin 5s linear infinite; } .side { background:rgba(255,0,0,0.3); border:1px solid red; font-size:60px; font-weight:bold; color:#fff; height:196px; line-height:196px; position:absolute; text-align:center; text-shadow:0 -1px 0 rgba(0,0,0,0.2); text-transform:uppercase; width:196px; } .front { -webkit-transform:translateZ(100px); -moz-transform:translateZ(100px); -ms-transform:translateZ(100px); -o-transform:translateZ(100px); transform:translateZ(100px); } .back { -webkit-transform:rotateX(180deg) translateZ(100px); -moz-transform:rotateX(180deg) translateZ(100px); -ms-transform:rotateX(180deg) translateZ(100px); -o-transform:rotateX(180deg) translateZ(100px); transform:rotateX(180deg) translateZ(100px); } .left { -webkit-transform:rotateY(-90deg) translateZ(100px); -moz-transform:rotateY(-90deg) translateZ(100px); -ms-transform:rotateY(-90deg) translateZ(100px); -o-transform:rotateY(-90deg) translateZ(100px); transform:rotateY(-90deg) translateZ(100px); } .right { -webkit-transform:rotateY(90deg) translateZ(100px); -moz-transform:rotateY(90deg) translateZ(100px); -ms-transform:rotateY(90deg) translateZ(100px); -o-transform:rotateY(90deg) translateZ(100px); transform:rotateY(90deg) translateZ(100px); } .top { -webkit-transform:rotateX(90deg) translateZ(100px); -moz-transform:rotateX(90deg) translateZ(100px); -ms-transform:rotateX(90deg) translateZ(100px); -o-transform:rotateX(90deg) translateZ(100px); transform:rotateX(90deg) translateZ(100px); } .bottom { -webkit-transform:rotateX(-90deg) translateZ(100px); -moz-transform:rotateX(-90deg) translateZ(100px); -ms-transform:rotateX(-90deg) translateZ(100px); -o-transform:rotateX(-90deg) translateZ(100px); transform:rotateX(-90deg) translateZ(100px); }
这是个简单的3d盒子,可移动鼠标旋转