Html 重置透视值内部DIV
我有一些css 3D div,但我有一些问题。。 我想在透视图中旋转外部div,但不想用它旋转内部div。如何重置这些样式以使内部div再次变平 HTML:Html 重置透视值内部DIV,html,css,3d,transform,perspective,Html,Css,3d,Transform,Perspective,我有一些css 3D div,但我有一些问题。。 我想在透视图中旋转外部div,但不想用它旋转内部div。如何重置这些样式以使内部div再次变平 HTML: <section class="container" style="-webkit-perspective: 2000px; -webkit-perspective-origin-x: 0%; -webkit-perspective-origin-y: 0%;"> <div id="cube"> <div
<section class="container" style="-webkit-perspective: 2000px; -webkit-perspective-origin-x: 0%; -webkit-perspective-origin-y: 0%;">
<div id="cube">
<div class="bottom plutoring">
<div class="planet pluto">
<p> pluto </p>
</div>
</div>
</div>
有什么建议吗?我的直觉是,在你的代码中,行星的光环需要是行星的子元素,或者是它的兄弟元素。如果您不希望环的css转换影响行星,则环不应是行星的父对象 看看这个: 你需要两样东西:
- 在planet preserve3d的父级中启用
- 以一种独特的方式改造地球
我想你的问题可能是3d保护。对代码进行了修改,但不清楚。更新的小提琴:不是一个解决方案,但至少有一些东西可以玩。非常感谢!这就是解决办法。
.container {
width: 1000px;
height: 900px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.bottom {
-webkit-transform: rotateX( 82deg ) rotateY( -5deg ) rotateZ( 197deg );
}
.bottom {
-webkit-transform: rotateX( 82deg ) rotateY( -5deg ) rotateZ( 197deg );
background:green;
-webkit-transform-style: preserve-3d;
}
.planet{
background:blue;
display:inline-block;
font-size: 40px;
-webkit-transform: rotateZ( -197deg ) rotateY( 5deg ) rotateX( -82deg ) ;
}