css3 3d旋转兼容模式下,前端CSS3： 3D旋转的问题 （请水神和毒舌放过）
生活随笔
收集整理的這篇文章主要介紹了
css3 3d旋转兼容模式下,前端CSS3： 3D旋转的问题 （请水神和毒舌放过）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[HTML] 純文本查看 復制代碼
Documentbody {
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旋转的问题 （请水神和毒舌放过）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 写给计算机老师的一封信800,写给老师的
- 下一篇： ajax等待进度数,如果ajax少于X秒