Deform the element.

Related styles:

  1. transform-origin

Sets the origin of an element deformation

transform-origin: center; // default transform-origin: top left; transform-origin: 50px 50px; transform-origin: bottom right 60px; // 60 - "zCopy the code

  1. transform-style

Sets whether the children of the element are in 3D space or flat.

transform-style: flat;
transform-style: preserve-3d;
Copy the code
  1. transform-box
transform-box: border-box; // Use a border as a reference box. The reference box for a table is the border that surrounds the table, not its frame. transform-box: fill-box; // Use the object bounding box as the reference box. transform-box: view-box; // Use the latest SVG viewport as a reference box transform-box: content-box; transform-box: stroke-box;Copy the code
  1. perspective

Specifies the distance between the observer and the plane z=0 to create perspective effects for elements with three-dimensional position transformations. The three-dimensional element z>0 is larger than normal, and z<0 is smaller than normal, depending on the value of this attribute.

perspective: 800px;
Copy the code
  1. perspective-origin

Specifies the position of the observer as the vanishing point for the Perspective property.

perspective-origin: top left;
perspective-origin: 50% 50%;
Copy the code
  1. backface-visibility

Specifies whether the element is visible when its back is facing the observer

backface-visibility: visible;
backface-visibility: hidden;
Copy the code

Methods are:

  1. Mobile: translate
transform: translateX(50px);
transform: translateY(30px);
transform: translate(20px, 40px);
transform: translate3d(5px, 22px, 3px);
Copy the code
  1. Zoom: scale
The transform: scaleX (3.5); The transform: scaleY (0.5); The transform: scale (1.5, 0.3); The transform: scale3d (3.5, 0.5, 3.5);Copy the code
  1. Rotation: rotate
transform: rotateX(80deg);
transform: rotateY(20deg);
transform: rotate(30deg);
transform: rotate3d(5, -25, 11, 32deg);
Copy the code
  1. Skew: tilt
transform: skewX(20deg);
transform: skewY(50deg);
transform: skew(10deg, 40deg);
Copy the code
  1. Matrix: matrix

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), 3 x 3 matrix3d translateY ()) (scalex, 0, 0, skewx, scaley, 0,0,0,0, scalez, 0, translatex, translateY, translatez, 1) 4 x 4 You can omit units

/* 2D default */ transform: matrix(1, 0, 0, 1, 0, 0); /* 3D default */ transform: matrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1); ,0,0,1,30,30 matrix (1) = = = translate (30, 30)Copy the code

Reference: www.zhangxinxu.com/wordpress/2… Github.com/Ztachi/lear… www.jianshu.com/p/52e0018e6…