Question

使用css3变换时：div（包含具有全局位置的元素）中的rotate（）。

<html>
<style>
body {
    background: #666;
}

.sticker {
    position: absolute;
    top: 200px;
    left: 100px;
    width: 250px;
    height: 250px;
    background: #ccc;    
}

#sticker2 {
    -moz-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    top: 200px;
    left: 500px;

}


.sticker-decoration {
    display: block;
    font-size: 0.1px;
    position: absolute;
    z-index: 99999;
}

.sticker-n, .sticker-s{
    background: url(standart-sides-horizontal-f1f1f1.png) repeat;
} 

.sticker-e, .sticker-w {
    background: url(standart-sides-vertical-f1f1f1.png) repeat;
}

.sticker-se, .sticker-sw, .sticker-nw, .sticker-ne {
    background: url(standart-corners-f1f1f1.png) repeat;
}


.sticker-n {
    height: 38px;
    left: 0;
    top: -38px;
    width: 100%;
    background-position: top left;
}
.sticker-s {
    bottom: -38px;
    height: 38px;
    left: 0;
    width: 100%;
    background-position: bottom left;
}
.sticker-e {
    height: 100%;
    right: -38px;
    top: 0;
    width: 38px;
    background-position: top right;
}
.sticker-w {
    height: 100%;
    left: -38px;
    top: 0;
    width: 38px;
    background-position: top left;
}
.sticker-se {
    height: 38px;
    bottom: -38px;
    right: -38px;
    width: 38px;
    background-position: bottom right;
}
.sticker-sw {
    bottom: -38px;
    height: 38px;
    left: -38px;
    width: 38px;
    background-position: bottom left;
}
.sticker-nw {
    height: 38px;
    left: -38px;
    top: -38px;
    width: 38px;
    background-position: top left;
}
.sticker-ne {
    height: 38px;
    right: -38px;
    top: -38px;
    width: 38px;
    background-position: top right;
}

</style>

<body>
<div class="sticker">
    <div class="sticker-decoration sticker-n"></div>
    <div class="sticker-decoration sticker-e"></div>
    <div class="sticker-decoration sticker-s"></div>
    <div class="sticker-decoration sticker-w"></div>
    <div class="sticker-decoration sticker-se"></div>
    <div class="sticker-decoration sticker-sw"></div>
    <div class="sticker-decoration sticker-ne"></div>
    <div class="sticker-decoration sticker-nw"></div>    
</div>

<div class="sticker" id="sticker2">
    <div class="sticker-decoration sticker-n"></div>
    <div class="sticker-decoration sticker-e"></div>
    <div class="sticker-decoration sticker-s"></div>
    <div class="sticker-decoration sticker-w"></div>
    <div class="sticker-decoration sticker-se"></div>
    <div class="sticker-decoration sticker-sw"></div>
    <div class="sticker-decoration sticker-ne"></div>
    <div class="sticker-decoration sticker-nw"></div>    
</div>

</body>
</html>

Firefox http://cjslade.github.com/Exp2/ff.png

中的结果

同样在Opera和Safari中。 Chrome渲染效果很好。

示例http://cjslade.github.com/Exp2/

有没有人有解决方案？

Answer 1

因为CSS3转换规范仍然是一个工作草案，在某些浏览器中仍然会出现这种烦人的错误，这些错误仍然不完全支持规范，或仅仅是因为它们有错误。

要解决您的问题并填充角落周围的1像素间隙，您可以简单地将div扩展1像素以覆盖间隙。

我只更改了以评论// was...

标记的以下属性

.sticker-n {
    height: 38px;
    left: -1px;            // was   left: 0;
    top: -38px;
    right: -1px;           // was   width: 100%;
    background-position: top left;
}
.sticker-s {
    bottom: -38px;
    height: 38px;
    left: -1px;            // was   left: 0;
    right: -1px;           // was   width: 100%;
    background-position: bottom left;
}
.sticker-e {
    bottom: -1px;          // was   height: 100%;
    right: -38px;
    top: -1px;             // was   top: 0;
    width: 38px;
    background-position: top right;
}
.sticker-w {
    bottom: -1px;          // was   height: 100%;
    left: -38px;
    top: -1px;             // was   top: 0;
    width: 38px;
    background-position: top left;
}

jsFiddle demo 在Firefox 6中工作正常。不确定Opera和Safari，但也应该在这些浏览器上工作。

我不喜欢这个修复，但此刻我没有看到任何其他清洁方式

CSS3转换：rotate（）和几个位置为：绝对的DIV

1 个答案: