[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 worldI'm here.

總結

以上是生活随笔為你收集整理的css3 3d旋转兼容模式下,前端CSS3： 3D旋转的问题 （请水神和毒舌放过）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。