Question

我已经创建了这个3D元素，并且Firefox中的边框显示不正确，但它在Chrome上运行正常。我能解决这个问题吗？

HTML ：

<div id="content">
  <div class="element">
    <div class="front">
    </div>
    <div class="right">
    </div>
  </div>
</div>

CSS ：

body{
    background:rgba(255,0,0, .6);
    min-width:1200px;
}

#content{
    width:100%;
    height:500px;
    margin:150px 0 0 0;
    -webkit-perspective : 1000px;
    perspective : 1000px;
    -webkit-perspective-origin  : 50% 20%;
    perspective-origin  : 50% 20%;
}
.element{
    width:300px;
    height:400px;
    margin: 50px auto;
    position: relative;
    -webkit-transform-style : preserve-3d;
    transform-style : preserve-3d;
    -webkit-transform: rotateY(-10deg);
    -moz-transform: rotateY(-10deg); 
    transform: rotateY(-10deg); 
    -webkit-transition:all .5s ease;
    -moz-transition:all .5s ease;
    transition:all .5s ease;
}
.element div{
    position: absolute;
}
.element:hover{
    -webkit-transform: rotateY(-80deg) translateZ(200px);
    -moz-transform: rotateY(-80deg) translateZ(200px);
    transform: rotateY(-80deg) translateZ(200px);
}
.front{
    width:300px;
    height:400px;
    background:#fff;
    -webkit-transform:translateX(40px) translateZ(-50px);
    -moz-transform:translateX(40px) translateZ(-50px);
    transform:translateX(40px) translateZ(-50px);
    background:#333;
}
.right{
    width:300px;
    height:400px;
    background:#fff;
    -webkit-transform:rotateY(90deg) translateX(200px) translateZ(190px);
    -moz-transform:rotateY(90deg) translateX(200px) translateZ(190px);
    transform:rotateY(90deg) translateX(200px) translateZ(190px);
}

jsfiddle.net/9kTEm/

Answer 1

将以下代码添加到.front和.right。这将有助于锯齿状边缘

outline: 1px solid transparent;

请参阅小提琴jsfiddle

元素边框在Firefox上无法正确呈现

1 个答案: