Mobile terminal layout (3D conversion, animation)

Record what you have learned , Welcome comments and corrections .

3D transformation

3D Coordinate system

• X Axis The bigger to the right , It's a positive value , Otherwise, vice versa

• Y Axis The bigger down , It's a positive value , Otherwise, vice versa

• Z Axis （ Point to us ） The bigger it is , It's a positive value , Otherwise, vice versa

3D Displacement

Grammar format ：

// Conform to the writing method 
transform: translate3d(x, y,z);  
// Write separately 
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

perspective

Grammar format ：

perspective: 800px;  

Be careful

1. The value range is often in 800px ~ 1200px Between .
2. Sure father add to
3. Perspective distance is also called sight distance , The so-called visual distance is the distance from the human eye to the screen .

3D rotate

rotate -rotate3d:  Means that elements can be moved along in a three-dimensional plane x Axis ,y Axis ,z Rotate axis or custom axis grammar

Grammar format ：

//x Axis y Rotate in a positive direction 45 degree   
transform:rotateX(45deg)   

//y The axis rotates in a positive direction 45 degree 
transform:rotateY(45deg)   

//Z The axis rotates in a positive direction 45 degree 
transform:rotateZ(45deg)

// Rotate along a custom axis  deg For angle    
transform:rotate3d(x,y,z,deg)       

The zoom

Grammar format ：

scale(width( wide ) Multiple ,height( high ) Multiple )
scaleX()
scaleY()
scaleZ()
scale3d(x,y,z)    

<br>

Stereoscopic presentation

Let the child box have space in the parent box , At this time, you can give father add to
Grammar format ：

transform-style: preserve-3d;   

 

Animation

Define animation

keyframes Define animation

// percentage 
@keyframes  The name of the animation {
	0%{
		 style 
	}

	100%{
		 style 
	}  

//from  to
@keyframes dance {

from {
    transform: scale(1)
}

to {
    transform: scale(1.5)
}

}

1. 0% It's the beginning of animation ,100% It's the end of the animation . Such a rule is an animation sequence
2. stay @keyframes To stipulate in CSS style , You can create animation effects that gradually change from the current style to the new one
3. Animation is the effect of gradually changing elements from one style to another , You can change any number of styles and times
4. Specify the time of change in percentage , Or use the key words "from" and "to", Equate to 0% and 100%

Animation uses

Grammar format ：

Attribute values can be written in no order

attribute ：

 

Animation speed curve

animation-timing-function:  Speed curve of specified animation , The default is "ease"

 

Reference resources
Animation +3D Convert notes _blink555 The blog of -CSDN Blog