<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS之旋转立方体</title> <style> *{ font-size:200px;} /*大元素*/ .wrap { position:relative; width:400px; height:400px; margin:100px auto; perspective: 800px; -webkit-perspective: 800px; -moz-perspective: 800px; -ms-perspective: 800px; -o-perspective: 800px; perspective-origin: 50% 100px; -webkit-perspective-origin: 50% 100px; -moz-perspective-origin: 50% 100px; -ms-perspective-origin: 50% 100px; -o-perspective-origin: 50% 100px; } /*所有div容器*/ .cube { position: relative; width: 200px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; } /*盒子各面共用的CSS*/ .cube div { position: absolute; width: 200px; height: 200px; opacity:1; } /*盒子各面的位置*/ .back { transform: translateZ(-100px) rotateY(180deg); -webkit-transform: translateZ(-100px) rotateY(180deg); -moz-transform: translateZ(-100px) rotateY(180deg); -ms-transform: translateZ(-100px) rotateY(180deg); -o-transform: translateZ(-100px) rotateY(180deg); background-color:#ff0000; background-size:200px; } .right { transform: rotateY(-270deg) translateX(100px); -webkit-transform: rotateY(-270deg) translateX(100px); -moz-transform: rotateY(-270deg) translateX(100px); -ms-transform: rotateY(-270deg) translateX(100px); -o-transform: rotateY(-270deg) translateX(100px); transform-origin: top right; -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; background-color:#ff00ff; background-size:200px; } .left { transform: rotateY(270deg) translateX(-100px); -webkit-transform: rotateY(270deg) translateX(-100px); -moz-transform: rotateY(270deg) translateX(-100px); -ms-transform: rotateY(270deg) translateX(-100px); -o-transform: rotateY(270deg) translateX(-100px); transform-origin: center left; -webkit-transform-origin: center left; -moz-transform-origin: center left; -ms-transform-origin: center left; -o-transform-origin: center left; background-color:#00ff00; background-size:200px; } .top { transform: rotateX(-90deg) translateY(-100px); -webkit-transform: rotateX(-90deg) translateY(-100px); -moz-transform: rotateX(-90deg) translateY(-100px); -ms-transform: rotateX(-90deg) translateY(-100px); -o-transform: rotateX(-90deg) translateY(-100px); transform-origin: top center; -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; background-color:#ffff00; background-size:200px; } .bottom { transform: rotateX(90deg) translateY(100px); -webkit-transform: rotateX(90deg) translateY(100px); -moz-transform: rotateX(90deg) translateY(100px); -ms-transform: rotateX(90deg) translateY(100px); -o-transform: rotateX(90deg) translateY(100px); transform-origin: bottom center; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; -o-transform-origin: bottom center; background-color:#00ffff; background-size:200px; } .front { transform: translateZ(100px); -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); -ms-transform: translateZ(100px); -o-transform: translateZ(100px); background-color:#0000f00; background-size:300px; } /*动起来*/ @keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotateY(0); } to { -moz-transform: rotateY(360deg); } } @-ms-keyframes spin { from { -ms-transform: rotateY(0); } to { -ms-transform: rotateY(360deg); } } @-o-keyframes spin { from { -o-transform: rotateY(0); } to { -o-transform: rotateY(360deg); } } .cube { animation: spin 5s infinite linear; -webkit-animation: spin 5s infinite linear; -moz-animation: spin 5s infinite linear; -ms-animation: spin 5s infinite linear; -o-animation: spin 5s infinite linear; } </style> </head> <body> <div class="wrap"> <div class="cube"> <div class="front"></div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> </div> </div> </body> </html>
