CSS3 трансформация - нейтральный фон под преобразованной DIV

Мой вопрос относится к следующей скрипке: JSFiddle CSS3 трансформация - нейтральный фон под преобразованной DIV

<body> 
    <div class="transform">Content</div> 
</body> 

body { 
background-color: rgb(255, 255, 255); 
background-image: url("http://i.imgur.com/aQLvU9B.png"); 
}

При наведении курсора фильеры содержимого DIV матрица tranformation активируется. Я хочу, чтобы фон за этим преобразованным div белый и не показывал фон тела.

Любая идея, как я могу это сделать, не вложив преобразованный div в другой div? Я пытался играть с: до и: после того, как, но не нашел рабочего раствора :(

Спасибо и наилучшими пожеланиями, Хендрик

источник

2013-12-30 Rubberducker

Mate, я думаю, что это единственный способ это может быть сделано. Здесь сидел, думая об этом, и добавление другого div выше или ниже - единственное решение. Способ HTML и CSS. – dowomenfart

поставить еще один DIV до преобразования, называют его спектрально-BG и дать относительную позицию белый фон (придавая ему ту же высоту и ширину преобразования DIV.

источник

2013-12-30 15:25:55

Четко прочитайте вопрос. Хендрик уточнил, что ему нужно решение, не вложив преобразованный div в другой div. – Sriraman

, тогда я не думаю, что есть решение –

Я не думаю, что будет действительно решение, поэтому я буду отмечать этот ответ как решение. – Rubberducker

Как говорит Donte Трумбл, я не думаю, что это может быть сделано без добавления другой DIV ... если вы не обмануть немного.

Вот мое решение

updated fiddle

и CSS

.transform{ 
    width: 200px; height: 200px; 
    position: relative; 
    border: 1px solid white; 
    background-color: #DDD; 
    vertical-align: bottom; 
    -o-transition:.5s; 
    ms-transition:.5s; 
    moz-transition:.5s; 
    webkit-transition:.5s; 
    transition:.5s; 
} 

.transform:hover { 
    background-color: #CACACA; 
    -moz-transform: matrix(1, 0.05, 0.01, 1, 0, 0) scale(0.95,0.95); 
    -webkit-transform: matrix(1, 0.05, 0.01, 1, 0, 0) scale(0.95,0.95); 
    transform: matrix(1, 0.05, 0.01, 1, 0, 0) scale(0.95,0.95); 
} 

.transform:before { 
    content: ""; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    background-color: white; 
    z-index: -1; 
    -o-transition:.5s; 
    ms-transition:.5s; 
    moz-transition:.5s; 
    webkit-transition:.5s; 
    transition:.5s; 
} 
.transform:hover:before { 
    -moz-transform: matrix(1.0005, -0.05, -0.01, 1.0005, 0, 0) scale(1.05,1.05); 
    -webkit-transform: matrix(1.0005, -0.05, -0.01, 1.0005, 0, 0) scale(1.05,1.05); 
    transform: matrix(1.0005, -0.05, -0.01, 1.0005, 0, 0) scale(1.05,1.05); 
} 
.transform:after { 
    content: "Content"; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    background-color: #DDD; 
    z-index: 1; 
    -o-transition:.5s; 
    ms-transition:.5s; 
    moz-transition:.5s; 
    webkit-transition:.5s; 
    transition:.5s; 
} 
.transform:hover:after { 
    background-color: #cacaca; 
}

Я не буду объяснять, что ты мне изменял .. Я оставляю вам, чтобы узнать ..

источник

2013-12-30 18:38:14 vals

Не уверен, могу ли я отметить ответ ур в качестве решения для моего вопроса, но твой за этот маленький взлом - к сожалению, я не могу использовать его в продуктивных средах;) – Rubberducker

CSS3 трансформация - нейтральный фон под преобразованной DIV

ответ

Смежные вопросы