CSS3 Rotate3d in desired direction

Question

In this demo of rotate3d from the W3C, the first example is rotating the face of a div toward the "upper left".

However, with the same vector I can't get the face of a div to rotate toward the "upper left". How can I get this same rotation?

jsfiddle

#r {
    position: absolute;
    top: 100px;
    left: 100px;
    border: 7px dotted;
    width: 200px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
}

#r:hover {
    -webkit-transform: rotate3d(1, -1, 0, 70deg);
    transform: rotate3d(1, -1, 0, 70deg);
}

Answer 1

What you have is correct. For me, the transformed version of the W3Schools first demo looked like this when inspected

The black outline was some weirdly warped version that doesn't make sense when you look at the code. The blue area is where it says the element is (and where it should be) and shows the correct transform

Here is what I see when I hover over your element

It's the same transform, just with a wider element. The problem is that our eyes can perceive that rotation as leaning back left of forwards right.

To show this you can look at this example I created for another question. With the shadows you can easily tell that the divs are following the mouse cursor

Now comment out lines 15 and 16 in the javascript to remove the shadows and try moving your mouse from the top left to the bottom right and then back. What do you find? it looks like the divs are moving the same way no matter which you go to!

Our eyes are stupid. Adding a small shadow to your element will make our eyes interpret the transform as you want them to. Updated jsFiddle

box-shadow: 10px 10px 5px #3D352A;

You can style the shadow however you like, but adding a small one makes it easier for our eyes to follow exactly what's happening

On a side note, don't use W3Schools, they are flawed, outdated, and often act unlike how they should. Don't be a W3Fool !

Answer 2

Like Zeaklous noted, it's our eyes who are fooled. So you'd have to add the perspective property to the container element. With this property you can control the strength of the 3d effect. It's the distance of the viewer's eye to the scene. The lower the value the more 3D effect there will be.

Another thing: It's better to have a container element for the face with position:relative and give that container the perspective property. Else you'd need perspective-origin property to center the 3D effect.

There also seems to be a bug in chrome. So sometimes the perspective works and sometimes not. A hack which I used is to add the perspective as transform: perspective( 400px ) to the child element.

Look the updated JSFiddle

Remember: Add the prefixes -moz and -o to support Mozilla and Opera, too.

Answer 3

Made four different variants, each in one direction...

<div id="ulb">
ULB<br/>
UPPER LEFT Backwards<br/>
rotate3d(-200,70,0,70deg);
</div>

<div id="urb">
URB<br/>
UPPER RIGHT Backwards<br/>
rotate3d(1,1,0,70deg);
</div>

<div id="llb">
LLB<br/>
LOWER LEFT Backwards<br/>
rotate3d(1,1,0,-70deg);
</div>

<div id="lrb">
LLB<br/>
LOWER RIGHT Backwards<br/>
rotate3d(1,-1,0,70deg);
</div>

JSFiddle