CODEWITHSUNDEEP
jquerycsstransform
eozzy
eozzy

Reputation: 68820

CSS Transform - RotateY not as desired

I'm using:

transform: rotateY( 45deg );

and (for the right side) 

transform: rotateY( -45deg );

.. but the result is not as expected, the elements still look like a rectangle. Please check this fiddle: http://jsfiddle.net/uy57B/1/

Upvotes: 0

Views: 64

Answers (2)

sheng
sheng

Reputation: 1372

Use :not. Add a class name to one of your elements and the code should look something like this:

    <style type="text/css">
       div:not(.special):hover{
         transform: perspective(400px) rotateY(45deg);
       }
    </style>

    <div></div>
    <div></div>
    <div class="special"></div>

Upvotes: 0

kalley
kalley

Reputation: 18472

You need to add perspective:

.left, .right {
    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    perspective: 400px;
}

Play with it until you find the right number. Bigger will make the angle seem slighter because the field is deeper.

Upvotes: 1

Related Questions