css3制作八棱锥_用css3实现立方体

.cude {

width:300px;

height:300px;

position: relative;

margin: 100px auto;

transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

transform: rotateX(-30deg) rotateY(-80deg);

-webkit-animation: rotate 20s infinite;

animation-timing-function: linear;

transform-origin: 50% 50% 0;

-webkit-transform-origin: 50% 50% 0;

}

.surface {

position: absolute;

top: 0;

left: 0;

width: 300px;

height: 300px;

background:#666;

opacity: 0.8;

font-size:100px;

text-align: center;

line-height:300px;

font-weight: bold;

color:#fff;

border:1px solid #fff;

}

.surface img {

width: 100%;

}

.front {

transform: rotateY(0) translateZ(150px);

}