css_transform.md

overall

• css transform property lets you modify the coordinate space of the css visual formatting model.
• elements can be ______ according to values set ⋅⋅* translated ⋅⋅* rotated ⋅⋅* scaled ⋅⋅* skewed
• you can almost think of transform as an "umbrella" property that says to the interpreter: "hey, something about the coordinate space of the css visual formatting model is gonna change. i'll tell you waht it is in in the k thx"

syntax

Formal syntax: none | <transform-function>+
transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)

transform: translateX(10px) rotate(10deg) translateY(5px)

translate

transform: translate(tx[, ty]) /* one or two <translation-value> values */

• Specifies a 2D translation by the vector [tx, ty]. If ty isn't specified, its value is assumed to be zero.
• Each arguments may be either a value or a value. transform: translate(15%, 30px)
• also translateX and translateY

check it mdn