Question

我正在尝试制作一个简单的CSS幻灯片。我有一般的外观，但是当我旋转它以一定的角度设置它时，它会在接缝处显示一些小的白线＆＃34;。我试过玩backface-visibility: hidden，但没有运气。

这在Chrome和Opera中完美运行，但在IE，FireFox和Safari中失败。

Here is a Fiddle to show you what I'm talking about.

HTML

<div class="filmstrip"></div>

CSS

.filmstrip {
    width: 120%;
    height: 150px;
    background-color: rgba(0, 0, 0, 0.8);
    position: relative;
    margin: 40px -10%;

    backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform: rotate(-2deg) rotateY(0deg);
    -ms-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg) rotateY(0deg);
    -webkit-transform: rotate(-2deg);
}
.filmstrip::before,
.filmstrip::after {

    backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);

    content: "";
    display: block;
    position: absolute;

    height: 20px;
    width: 100%;

    background-color: rgba(0, 0, 0, 0.0);
    background-image: linear-gradient(left, 
        rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.0) 50%, rgba(0, 0, 0, 0.0) 100%);
    background-image: -ms-linear-gradient(left, 
        rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.0) 50%, rgba(0, 0, 0, 0.0) 100%);
    background-image: -moz-linear-gradient(left, 
        rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.0) 50%, rgba(0, 0, 0, 0.0) 100%);
    background-image: -webkit-linear-gradient(left, 
        rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.0) 50%, rgba(0, 0, 0, 0.0) 100%);
    background-size:40px 40px;
    background-clip: padding-box;
    border-color: rgba(0, 0, 0, 0.8);
    border-width: 10px 0px;
    border-style: solid;
}
.filmstrip::before {
    top: -40px;
}
.filmstrip::after {
    bottom: -40px;
}

Answer 1

问题在于你的渐变填充参考下面的小提琴我使用了倾斜而不是旋转http://jsfiddle.net/suriyag/LQ46D/

 transform: skewX(-25deg);
 -o-transform:skewX(-25deg);

在非webkit浏览器中转换后的奇怪行

1 个答案: