你的位置:首页 > 网页设计

[网页设计]css3 正方体旋转


<div class="contain"> <div class="box">  <div class="face one"> </div>  <div class="face two"> </div>  <div class="face three"> </div>  <div class="face four"> </div>  <div class="face five"> </div>  <div class="face six"> </div> </div></div><style>    .contain {  height: 550px;  margin: 0 auto;  position: relative;  width: 250px;}.box {  animation: 4s ease 0s normal none infinite running rotate;  height: 240px;  margin: 0 auto;  position: relative;  transform-style: preserve-3d;  width: 240px;}.face {  backface-visibility: hidden;  background-color: #fae48c;  height: 240px;  opacity: 0.6;  position: absolute;  width: 240px;}.box .one {  background-color: #fae48c;  transform: rotateX(90deg) translateZ(120px);}.box .two {  background-color:#9900CC ;  transform: translateZ(120px);}.box .three {  background-color:#009900;  transform: rotateY(90deg) translateZ(120px);}.box .four {  background-color:#66CCFF;  transform: rotateY(180deg) translateZ(120px);}.box .five {  background-color:#CC0000;  transform: rotateY(-90deg) translateZ(120px);}.box .six {  background: none repeat scroll 0 0 #fae48c;  transform: rotateX(-90deg) translateZ(120px) rotate(180deg);}.box-demo {  left: 40px;  position: absolute;  top: 40px;}.donut-text {  left: 60px;  top: 55px;}.enjoy {  left: 50px;  top: 90px;}input[type="checkbox"] {  display: none;}label {  background: none repeat scroll 0 0 #ff6970;  border-radius: 5px;  color: #b3e5d4;  cursor: pointer;  font-family: "Alegreya Sans",sans-serif;  font-size: 18px;  left: 60px;  padding: 5px;  position: absolute;  text-align: center;  top: 325px;  width: 125px;}input:checked ~ .box .face {  backface-visibility: visible;}@keyframes rotate {100% {  transform: rotateY(360deg) rotateX(360deg);}}</style>