CSS3 transform: rotate () и несколько DIV с позицией: абсолютный - PullRequest
Новая
       7

CSS3 transform: rotate () и несколько DIV с позицией: абсолютный

1 голос
/ 23 августа 2011

При использовании преобразования css3: rotate () в div, который содержит элементы с глобальными позициями. 

<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

Аналогично в Опере и Сафари. Chrome делает это отлично.

Пример http://cjslade.github.com/Exp2/

У кого-нибудь есть решение?

1 Ответ

0 голосов
/ 23 августа 2011

Поскольку спецификация преобразования CSS3 все еще находится в рабочем состоянии, раздражающие ошибки этого типа все еще появляются в некоторых браузерах, которые все еще не полностью поддерживают спецификацию, или просто из-за ошибок, которые у них есть.

ToЧтобы обойти вашу проблему и заполнить пробел в 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, но также должен работать в этих браузерах.

Мне не нравится это исправление, но на данный момент я не вижу другого более чистого пути

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...