About

Choose an option in the list on the left. See HTML/CSS Code of the chosen option. Look for grayed area.

In every option you will find two boxes:

• The top box is transparent with the border. This box is static and stays in its original position. It is for reference only.
• Red box is defined initially at the same location as the top box.
  When the top box is hovered, the red box changes its position according to the defined transform.

You can see the behavior of the currently defined transform in each option, or you can write your own transform or transforms separated by spaces in the '#top:hover ~ #bottom' CSS code. You have a few commented transforms. Remove the comment to see its behavior.

To Do

Try different 2d transform functions.

See how rotate(180deg) flips the TEXT top to bottom and rotateY(180deg) flips the TEXT left to right.

Try to change the transform-origin. Examples:

transform-origin: 100px 0px;
transform-origin: top right;

Q & A

Question: In translate transform, what will happen if transform-origin is changed? How it will change the translation?

Answer: It will not change, the origin is not important for translate transform.

Question: What will happen if the box new location is over the screen?

Answer: It will not be ssen. Try to translate, for example in x direction, by 1000px.

Question: Why we don't see any thing while: rotateY(90deg)?

Answer: You will see the left side of the box. It has no thickness and then you don't see it.