What are the transform knowledge points of CSS2D conversion and 3D conversion
This article is a detailed introduction to "CSS2D conversion, 3D conversion transformation knowledge points", detailed content, clear steps, details properly handled, I hope this article "CSS2D conversion, 3D conversion transformation knowledge points" article can help you solve doubts, the following with the small series of ideas slowly in-depth, together to learn new knowledge bar.
2D conversion
Definition: A 2D transformation is an operation performed on an element in a plane.
Elements can be displaced, rotated, or stretched horizontally or vertically.
determining coordinate system
By default, the x axis is horizontal and the right is positive.
By default, the y-axis is vertical and positive downward.
Transformation attribute: transform
Attribute Value:
transform: none; default
transform: translate (); shift translation unit is px
transform: rotate (); rotation unit is deg degrees
transform: scale (); scale has no units Default is 1
transform: skew (); tilt unit is deg
transform: matrix (); matrix
transform: perspective (); depth-of-field viewing distance unit is px
translate attributes
transform: none; Description: Definition does not transform.
transform: translate(200px); translation, default is X-axis movement, can be %, this % is its own, not the parent element
transform: translate(200px); default is move along X axis
transform: translateX(200px); moves from the current element position according to the parameters given on the X axis.
transform: translateY(200px); moves from the current element position according to the parameters given on the Y axis.
transform: translate(10px,20px); defines a 2D translation movement.
rotational attribute
transform: rotate(30deg); default is Z axis rotation.
transform: rotateX(30deg); rotates from the current element position according to the parameters given on the X axis.
transform: rotateY(30deg); rotates from the current element position according to the parameters given on the Y axis.
scaling properties
transform: scale(0.2); the default is X and Y scaling simultaneously.
transform: scaleX(2); define scaling transform by setting the value of X axis
transform: scaleY(3); Defines the scaling transform by setting the value of the Y axis.
transform: scale(2,5); defines 2D scaling.
transform: scaleX(2) scaleY(3) ; the element increases or decreases in size,
Depending on the parameters width (X axis) and height (Y axis), negative values are possible.
But negative values flip the element first (180deg clockwise),
Then zoom in.
tilt attribute
transform: skew(30deg); Default is X-axis skew.
transform: skewX(30deg); Defines the tilt transform by setting the value of the X axis
transform: skewY(30deg); Defines the tilt transform by setting the value of the Y axis
transform: skew(30deg,130deg); define 2D skew
transform-origin Change the position of the base point of an element Attribute value can be added left right...
Main effect: allows us to change the base position of an element before performing the transform action.
transform-origin(X,Y): The base point (reference point) used to set the motion of the element.
2.transform-origin(X, Y, Z); where the Z-axis setting can only be a numerical value.
conversion base
Change the position of an element's base point transform-origin
Its main purpose is to allow us to change the base position of an element before performing the transform action.
A. transform-origin(X,Y): The base point (reference point) used to set the motion of the element. The default point is the center point of the element. The values of X and Y can be percentage values,em,px, where X can also be character parameter values left,center,right;Y is the same as X. In addition to percentage values, character values top,center,bottom can also be set.
B, transform-origin(X, Y, Z); where the Z axis setting can only be a numerical value.
Read here, this article "CSS2D conversion, 3D conversion transformation knowledge points what" article has been introduced, want to master the knowledge points of this article also need to practice to understand, if you want to know more related content of the article, welcome to pay attention to the industry information channel.
