Translate | Scale | Rotate |
---|---|---|

translate() | scale() | rotate() |

translate3d() | scale3d() | rotate3d() |

translateX() | scaleX() | rotateX() |

translateY() | scaleY() | rotateY() |

translateZ() | scaleZ() | rotateZ() |

Skew | Other |
---|---|

skew() | matrix() |

skewX() | matrix3d() |

skewY() | perspective() |

find perfect center method of modal with translate

Much like translate() does for x and y translations, translate3d() is a shorthand function that incorporates the x, y, and z translation values into a single function.

Unlike translate(), there is no fallback for situations where translate3d() does not contain three values. Thus, translate3d(1em,-50px) should be treated as invalid by user agents instead of being assumed to be translate3d(2em,-50px,0).

The number value supplied to a scale function is a multiplier; thus, scaleX(2) will make an element twice as wide as it was before the transformation, whereas scaleY(0.5) will make it half as tall. Given this, you might expect that percentage values are permissible as scaling values, but they aren’t.

If you want to scale along both axes simultaneously, use scale(). The x value is always first and the y always second, so scale(2,0.5) will make the element twice as wide and half as tall as it was before being transformed. If you only supply one number, it is used as the scaling value for both axes; thus, scale(2) will make the element twice as wide and twice as tall. This is in contrast to translate(), where an omitted second value is always set to zero. scale(1) will scale an element to be exactly the same size it was before you scaled it, as will scale(1,1). Just in case you were dying to do that

The function rotate() is a straight 2D rotation, and the one you’re most likely to use. It is equivalent to rotateZ()

If you’re comfortable with vectors and want to rotate an element through 3D space, then rotate3d() is for you. The first three numbers specify the x, y, and z components of a vector in 3D space, and the degree value (angle) determines the amount of rotation around the declared 3D vector.

Perspective values must always be positive, nonzero lengths. Any other value will cause the perspective() function to be ignored.

div { transform: rotate(45deg); transform-origin: 20% 40%; }

transform-style: preserve-3d; - Created cube of divs, for flipping efect 2 divs are enough.

in templates there is div flip without 3D effect, full tutrial is in w3schools

- a:link {color: blue;}
- a:visited {color: purple;}
- a:hover {color: red;}
- a:active {color: yellow;}