css perspective+tranform

# Web Site Writing Basics

# perspective # Tranform

# CSS

CSS Perspective is a feature used to create a 3D space for elements on a web page, determining the distance of the audience from the object, making the elements that are transformed (such as rotation) appear as real as what our eyes see in real life, such as objects that are closer to looking larger than objects that are far away, and affecting the depth of the overall picture. The smaller the perspective, the larger and closer the object looks to our eyes, the clearer the 3D dimension.

Perspective working principle

Create a 3D space:

The perspective property will enable 3D space for the subelements being transformed.

Define spacing:

The value of the perspective is the distance from the user to the Z-plane where the object is.

Effect on vision:

Minor Value: Make an object appear larger when it is near, and it has a distinctive dimension.

Very valuable: The depth effect will look more delicate, the object will look flattened.

Application to Transform:

Perspective is often combined with other CSS features, such as transform: rotateY (), to create the illusion of rotating 3D objects.

Difference between perspective and transform: perspective ()

Perspective (features):

Use with the parent Element to create a 3D space together for all converted child Element.

Transform: perspective () (function):

Use directly with the Element to be converted to determine the depth of the object directly.

Example of use

Code

/ * Assign 3D space to container * / .container {perspective: 1000px; / * Define user spacing * /}

/ * Convert child element to rotate and dimensional * / .child-element {transform: rotateY (30deg); / * element rotation example * /

}