我有一个 div,它有两个子 div,一个在屏幕平面上,另一个垂直于屏幕。
我尝试将 div 沿 Y 轴
旋转大约 30 度
。保持其 transform-style 3d preserved
。
当这样做时,在 Firefox 中边框不再是一条直线。看起来像这样
近距离观察
我碰巧用到了下面的代码
.holder {
position: relative;
top: 0;
left: 0;
width: 200px;
height: 226px;
perspective: 2000px;
-moz-perspective: 2000px;
}
.box {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 226px;
background-color: transparent;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform: translateZ( -100px ) rotateY(30deg);
-moz-transform: translateZ( -100px ) rotateY(30deg);
transition: transform 0.5s;
-moz-transition: transform 0.5s;
}
.box div {
position: absolute;
margin: 0;
display: block;
}
.box .front {
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: rotateX(0deg) translateZ(10px);
-moz-transform: rotateX(0deg) translateZ(10px);
background-color: grey;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.box .left {
left: 0;
top: 0;
bottom: 0;
width: 20px;
transform: rotateY(-90deg) translateZ(10px);
-moz-transform: rotateY(-90deg) translateZ(10px);
background-color: black;
background-size: cover;
background-position: left;
background-repeat: no-repeat;
}
<div class="holder">
<div class="box">
<div class="front"></div>
<div class="left"></div>
</div>
</div>
如果我遗漏了什么,请告诉我。
link 的图片在其中一个答案中提供:
最佳答案
是火狐别名问题,可以补充
outline: 1px solid transparent;
作为 .box .front
的解决方法。
关于javascript - 在 Mac 的 Firefox 中旋转后 Div 的边框不是一条直线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32502121/