CSS conversion

How to use CSStransformproperty

Transformation allows you to translate, rotate, scale and tilt elements in 2D or 3D space. They are very cool CSS features, especially when combined with animation.

2D conversion

ThistransformThe properties accept the following functions:

  • translate()Move elements
  • rotate()Rotating element
  • scale()Scale the size of the element
  • skew()Distorted or skewed elements
  • matrix()A way to perform any of the above operations using a matrix of 6 elements, a not very friendly syntax, but verbose

We also have axis-specific functions:

  • translateX()Move elements around on the X axis
  • translateY()Move elements around on the Y axis
  • scaleX()Scale the size of the element on the X axis
  • scaleY()Scale the size of the element on the Y axis
  • skewX()Distort or tilt the element on the X axis
  • skewY()Distort or tilt the element on the Y axis

This is a conversion example, this change will change.boxThe element width is multiplied by 2 (repeat), and the height is multiplied by 0.5 (reduced by half):

.box {
	transform: scale(2, 0.5);
}

transform-originLet's set the origin ((0, 0)Coordinates) to transform, let's change the center of rotation.

Combine multiple transformations

You can combine multiple transformations by separating each function with a space.

E.g:

transform: rotateY(20deg) scaleX(3) translateY(100px);

3D conversion

We can go one step further and move the elements to 3D space instead of 2D space. For 3D, we added another axis Z, which increases the depth of the visual effect.

useperspectiveProperty, you can specify the distance between the 3D object and the viewer.

example:

.3Delement {
  perspective: 100px;
}

perspective-originDetermine the appearance of the viewer position and how we can view it on the X and Y axis.

Now, we can use other functions to control the Z axis. These functions add up to the transformation of other X and Y axes:

  • translateZ()
  • rotateZ()
  • scaleZ()

And the corresponding shorthandtranslate3d(),rotate3d()withscale3d()As usetranslateX(),translateY()withtranslateZ()Function etc.

Download mine for freeCSS Manual


More CSS tutorials:


Online technical encyclopedia!