css3 3d旋转兼容模式下,前端CSS3： 3D旋转的问题 （请水神和毒舌放过）

[HTML] 纯文本查看 复制代码

Document

body {

perspective: 500px;

}

.box {

position: relative;

width: 300px;

height: 300px;

margin: 100px auto;

transform-style: preserve-3d;

transition: all .6s;

}

.front,

.back {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-radius: 50%;

text-align: center;

line-height: 300px;

font-size: 30px;

color: #fff;

}

.front {

background-color: pink;

z-index: 1;

}

.back {

background-color: purple;

/* transform: rotateY(180deg); */

}

.box:hover{

transform: rotateY(180deg);

}

hello world

I'm here.