CSS3 transition rotation perspective 2d3d animation and other effects example code

I just found out that CSS3 is so useful...

CSS3 Box Model

In CSS3, the box model can be specified through box-sizing. There are two values, which can be specified as content-box and border-box. This changes the way of calculating the box size.

• box-sizing: content-box box size is width+padding+border (default)
• box-sizing: border-box box size is width (assuming padding and border do not exceed width)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a. CSS3 filter

The filter CSS property applies graphical effects such as blur or color shift to an element.

filter: function();
For example:
filter: blur(5px); /*blur processing, the larger the number, the blurrier it is*/

b. CSS3 calc function

calc() can perform some calculations when declaring CSS property values

width: calc(100%-80px);

c. CSS3 transitions

Transition animation: Repeat one state and gradually transition to another state

transition: The time taken by the property to be transitioned and when the motion curve starts;
Often used with /* :hover */, for example:
transition: width .5s, height .5s;
/*Multiple attributes are separated by commas or all*/
/**Whoever does the transition will be added**/

• Attributes : width, height, background, color, inner and outer margins are all OK, you can also use all
• Time taken : The unit is seconds (the unit must be written) For example, 0.5s
• Motion curve: The default is ease (can be omitted)
• When to start: The unit is seconds (the unit must be written), you can set the delay trigger time, the default is 0s (can be omitted)

2D Transformation

Transformation can achieve effects such as displacement, rotation, and scaling of elements.

• Move: translate
• Rotate: rotate
• Scaling: scale

2D Coordinate System

1. Translate

Change the position of an element on the page, similar to positioning

//Move the box position: locate the outer margin of the box 2D transformation movement transform: translate(x, y);
transform:translateX();
transform:translateY();

• Defines movement in 2D transformations, moving elements along the X and Y axes
• The biggest advantage of translate: it will not affect the position of other elements
• The percentage unit in translate is relative to the element itself : (50%, 50%);
• Has no effect on inline tags.

2. Rotate: rotate

2D rotation refers to rotating an element clockwise or counterclockwise in a two-dimensional plane.

transform:rotate(degrees) //unit: deg

• Positive angles are clockwise, negative angles are counterclockwise
• The default rotation center is the center of the element.

3. Center point transform-orgin

transform-origin:xy;

• Note that the following parameters x and y are separated by spaces.
• The default center point of the xy transformation is (50% 50%), which is equivalent to center center.
• You can set pixels or position nouns for xy (top bottom left right center)

4. Scale

transform:scale(x, y);

xy is separated by commas transform(i, j): the width is enlarged by i times, and the height is enlarged by j times; only one parameter is written, and the second parameter can set the conversion center point scaling like the first parameter. The default scaling is based on the center point, and it does not affect other boxes

5. Comprehensive writing of 2D conversion

a. Use multiple transformations at the same time, format: transform: translate() rotate() scale(), etc.;

b. The order will affect the effect of the conversion (rotating first will change the direction of the coordinate axis)

c. If there are displacement and other attributes at the same time, put the displacement first

CSS3 Animation

Animation can precisely control one or a group of animations by setting multiple nodes. It is often used to achieve complex animation effects, which can achieve more changes, more control, continuous automatic playback and other effects.

1. Basic use of animation

• Define the animation first
• Call animation again

a. Define animation using keyframes (similar to defining selectors)

You can add multiple animations to an element by separating them with commas.

@keyframes animation name {
    0% {
        width:100px;
    }
    100% {
        width:200px;
    }
}

• 0% is the start of the animation, 100% is the end of the animation
• You can change any number of styles any number of times
• from and to, equivalent to 0% and 100%
• Percentage should be an integer
• You can make multiple state changes keyframe keyframe

b. Elements using animation

div {
    animation: name;
    animation-duration: Duration:
}

2. Common properties of animation

3. Animation shorthand properties

animation: animation name, duration, motion curve, when to start, number of times to play, whether the animation is in the opposite direction, start or end status

animation: first 5s linear 2s infinite alternate

• The shorthand property does not contain animation-play-state
• Pause animation: animation-play-state: paused; often used with other functions such as mouse over
• Want the animation to walk back instead of jumping back: animation-direction: alternate;
• After the box animation ends, it stops at the end position: animation-fill-mode: forwards;

Speed ​​curve details

animation-timing-function: specifies the speed curve of the animation, the default is "ease"

3D Conversion

• 3D translation and 3D rotation
• 3D displacement: translate3d(x,y,z)
• 3D rotation: rotate3d(x,y,z)
• Perspective: perspective
• 3D rendering: transform-style

1. Displacement translate3d

• transform: translateZ(100px); Move along the z-axis, usually in px
• translateZ(100px) positive means moving outward, negative means moving inward
• translate3d(x,y,z) , cannot be omitted, write 0 if not specified

2. Perspective (px)

Perspective is written on the parent box of the observed element (larger when near and smaller when far)

d: It is the viewing distance, which is the distance from the human eye to the screen.

z: It is the z-axis, the distance of the object from the screen. The larger the z-axis (positive value), the larger the object we see.

3. Rotate rotate3d

rotate3d allows the element to rotate along the x-axis, y-axis, z-axis or custom axis in a three-dimensional plane

Element rotation direction: left-hand rule

x

• The thumb of the left hand points to the positive direction of the x-axis
• The bending direction of the remaining fingers is the direction in which the element rotates along the x-axis.

y

• The thumb of the left hand points to the positive direction of the y-axis
• The bending direction of the remaining fingers is the direction in which the element rotates along the y-axis (positive value)

transform:rotate3d(x,y,z,deg): Rotate along the defined axis by an angle of deg

xyz represents the vector of the rotation axis, and the last one indicates the angle of rotation

4. 3D rendering transform-style (important)

• Controls whether the child element opens the 3D environment
• transform-style: flat sub-element does not open 3D stereo space by default
• transform-style: preserve-3d; The child element opens the 3D stereoscopic space
• The code is written to the parent, but affects the child boxes

This concludes this article about example codes for CSS3 transition, rotation, perspective, 2d, 3d animation and other effects. For more relevant CSS3 rotation, perspective, 2d, 3d animation content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!