How to use the perspective attribute in css
This article mainly introduces how to use the perspective attribute in css. It is very detailed and has a certain reference value. Friends who are interested must finish it!
CSS3perspective attribute
What it does: the perspective attribute defines the distance of the 3D element from the view, in pixels. This attribute allows you to change the 3D element to see the view of the 3D element. When you define a perspective attribute for an element, its child elements get perspective, not the element itself.
Note: the perspective attribute only affects 3D conversion elements.
Syntax:
Perspective:number | none
Number: the distance of the element from the view, in pixels.
None: default value. Same as 0. Do not set perspective.
Description: this attribute should be used with the perspective-origin attribute so that the bottom position of the 3D element can be changed.
An example of using the CSS3perspective attribute
# div1
{
Position:relative
Height:150px
Width:150px
Margin:50px
Padding:10px
Border:1pxsolidblack
Perspective:150
-webkit-perspective:150;/*SafariandChrome*/
}
# div2
{
Padding:50px
Position:absolute
Border:1pxsolidblack
Background-color:yellow
Transform:rotateX (45deg)
-webkit-transform:rotateX (45deg); / * SafariandChrome*/
}
HELLO
The above is all the content of the article "how to use the perspective attribute in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
