用css绘制圆边方块,css3 立体方块

* {

margin: 0;

padding: 0;

}

body{

perspective: 1000px;

}

#box {

position: relative;

margin: 300px auto;

width: 200px;

font-size: 60px;

transform-style:preserve-3d;

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

animation:per linear 10s infinite ;

}

@keyframes per{

0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}

10%{transform:rotateX(36deg) rotateY(36deg) rotateZ(36deg);}

20%{transform:rotateX(72deg) rotateY(72deg) rotateZ(72deg);}

30%{transform:rotateX(108deg) rotateY(108deg) rotateZ(108deg);}

40%{transform:rotateX(144deg) rotateY(144deg) rotateZ(144deg);}

50%{transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);}

60%{transform:rotateX(216deg) rotateY(216deg) rotateZ(216deg);}

70%{transform:rotateX(252deg) rotateY(252deg) rotateZ(252deg);}

80%{transform:rotateX(288deg) rotateY(288deg) rotateZ(288deg);}

90%{transform:rotateX(324deg) rotateY(324deg) rotateZ(324deg);}

100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}

}

#box>div{

position: absolute;

width: 200px;

height: 200px;

background: rgba(0,0,0,0.3);

border: 1px solid #999;

color: white;

text-align: center;

line-height: 200px;

}

#d1{

transform: translateZ(100px);

}

#d2{

transform: rotateY(-180deg) translateZ(100px);

}

#d3{

transform: rotateX(-90deg) translateZ(100px);

}

#d4{

transform: rotateX(90deg) translateZ(100px);

}

#d5{

transform: rotateY(90deg) translateZ(100px);

}

#d6{

transform: rotateY(-90deg) translateZ(100px);

}