Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.