css3 正方体旋转_html/css_WEB-ITnose

<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>