CODEWITHSUNDEEP
htmlcsstransformation
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29129

css: rotate elements issue

I'm trying to rotate two elements in a very simple setting

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

The parent element has the css perspective property and on the children I do the transformation 

#parent {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
    width: 80px;
    height: 24px;
    background-color: grey;
    padding: 1px;
}
.child {
    -webkit-transform: rotateY( 66deg );
    -moz-transform: rotateY( 66deg );
    transform: rotateY( 66deg );
    width: 50px;
    height: 50px;
    margin:10px;
    background-color: green;
}

( jsfiddle ) What I don't understand is that the second child is rotated correctly, but the first is not. Its top is horizontal and not rotated. Any suggestions why this is happening ?

Upvotes: 2

Views: 116

Answers (1)

JDong
JDong

Reputation: 2304

It is because rotateY uses 3d perspective.

try this in your HTML and it should become clear:

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

For me on Firefox, it even changes the color of the rectangles.

Upvotes: 2

Related Questions