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


Unlike the 2D translation functions, translateZ() only accepts length values. Percentage values are not permitted for translateZ(), or indeed for any z-axis value.
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).

scale functions

A scale transform makes an element larger or smaller, depending on what value you use. These values are unitless real numbers and are always positive.
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


All four basic rotation functions accept just one value: a degree. This can be expressed using any of the valid degree units (deg, grad, rad, and turn) and a number, either positive or negative. If a value’s number runs outside the usual range for the given unit, it will be normalized to fit into the accepted range. In other words, a value of 437deg will be tilted the same as if it were 77deg, or, for that matter, -283deg. Note, however, that these are only exactly equivalent if you don’t animate the rotation in some fashion. That is to say, animating a rotation of 1100deg will spin the element around several times before coming to rest at a tilt of -20 degrees
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.


In the documentation for Safari, Apple writes that perspective values below 300px tend to be extremely distorted, values above 2000px create “very mild” distortion, and values between 500px and 1000px create “moderate perspective.”1 To illustrate this, Figure 1-19 shows a series of elements with the exact same rotation as displayed with varying perspective values.
Perspective values must always be positive, nonzero lengths. Any other value will cause the perspective() function to be ignored.

Transform origin

So far, all of the transforms we’ve seen have shared one thing in common: the precise center of the element was used as the transform origin. For example, when rotating the element, it rotated around its center, instead of, say, a corner. This is the default behavior, but with the property transform-origin, you can change it.
div { transform: rotate(45deg); transform-origin: 20% 40%; }


Dealing with Backfaces

Something you probably never really thought about, over all the years you’ve been laying out elements, was: what would it look like if I could see the back side of the element? Now that 3D transforms are a possibility, there may well come a day when you do see the back side of an element. You might even mean to do so intentionally. What happens at that moment is determined by the property backface-visibility.
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
The order of the :visited, :focus, :hover, and :active pseudo-classes is important. If they don’t appear as follows, then they won’t work as expected.

LoVe, HAte method to memorize