css ​transform

[vik1249]

Добрый день, дайте направление куда копать.

 

есть ромб делаю с помощью

.romb{width:150px;height:150px;transform: rotateX(45deg) rotateZ(-45deg);border: 1px solid black;}.img{background-image: url(img.png);transform: rotateX(0deg) rotateZ(45deg);}

<div class="romb"><div class="img"></div></div>

т.е. перевернут против часовой стрелки на 45 градусов, картинку обратно перевернул, собственно вопрос

 

как обнулить rotateX(0deg)? 

 

это пример 

 

по факту нужно сделать 1 большой ромб и в нем 9 маленьких ромбов в которых 9 background-image

кликабельным должен быть именно ромб

Edited August 21, 2015 by vik1249

[vik1249]

http://jsfiddle.net/njhr27bL/2/

да да именно так, спасибо большое

[afdw]

-45deg

[vik1249]

к сожалению нет

[afdw]

к сожалению нет

Почему?

[vik1249]

 

к сожалению нет

Почему?

 

Потому что наследуется все равно

[afdw]

 

 

к сожалению нет

Почему?

 

Потому что наследуется все равно

 

Оно не наследуется. Вертится весь элемент со всеми дочерними элементами. Тот код, что я дал, поворачивает в обратную сторону дочерние элементы.

[vik1249]

 

 

 

к сожалению нет

Почему?

 

Потому что наследуется все равно

 

Оно не наследуется. Вертится весь элемент со всеми дочерними элементами. Тот код, что я дал, поворачивает в обратную сторону дочерние элементы.

 

я повторюсь rotateZ переворачивает обратно таким образом я собственно так и написал, rotateX - нет

[afdw]

А можно пример на JSFiddle?

[vik1249]

А можно пример на JSFiddle?

да, вот http://jsfiddle.net/njhr27bL/, сделал как Вы говорите

[afdw]

А какой смысл использовать поворот по оси X?

[vik1249]

А какой смысл использовать поворот по оси X?

мне нужно ромб приплюснуть

 

подскажите может еще какой вариант есть

Edited August 21, 2015 by vik1249

[afdw]

http://jsfiddle.net/njhr27bL/1/

[vik1249]

http://jsfiddle.net/njhr27bL/1/

так маленький квадрат все равно сплюснутый тоже, а мне нужно чтобы он оставался квадратом 100х100 

[afdw]

http://jsfiddle.net/njhr27bL/2/