CSS properties - perspective-related

revision:

Content

perspective property perspective-origin property

perspective property

top

- is used to give a 3D-positioned element some perspective. The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

Tip: Also look at the perspective-origin property, which defines at which position the user is looking at the 3D object.

CSS syntax : perspective: length|none;

Property values:

length : how far the element is placed from the view

none : default value. Same as 0. The perspective is not set

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.perspective="5vw"

example: perspective property

perspective: 10vw:

DIV1
DIV2

perspective: none:

DIV3
DIV4
code: 
                    <div>
                        <h4>perspective: 10vw:</h4>
                        <div id="div1">DIV1
                            <div id="div2">DIV2</div>
                        </div>
                        <h4>perspective: none:</h4>
                        <div id="div3">DIV3
                            <div id="div4">DIV4</div>
                        </div>
                    </div>
                    <style>
                        #div1 {position: relative; height: 15vw; width: 15vw; margin-left: 7vw; border: 0.1vw solid blue; 
                            perspective: 7vw;}
                        #div2, #div4 {padding: 5vw; position: absolute; border: 0.1vw solid black; background: rgba(100,100,100,0.5); 
                            transform-style: preserve-3d; transform: rotateX(45deg);}
                        #div3 {position: relative; height: 15vw; width: 15vw; margin-left: 6vw; border: 0.1vw solid blue; 
                            perspective: none;}
                    </style>

perspective-origin property

top

- defines at from which position the user is looking at the 3D-positioned element.

When defining the perspective-origin property for an element, it is the CHILD elements that will get the effect, NOT the element itself.

Note: This property must be used in conjunction with the perspective property !

CSS syntax : perspective-origin: x-axis y-axis |none;

Property values:

x-axis : defining where the view is placed at the x-axis. Possible values: left, center, right, length, %. Default value: 50%

y-axis : defining where the view is placed at the y-axis. Possible values: top, center, bottom, length, %. Default value: 50%

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.perspectiveOrigin="5vw 50%"

example: perspective-origin property

perspective-origin: left:

DIV1-A
DIV2-A

perspective-origin: bottom right:

DIV3-A
DIV4-A

perspective-origin: -90%:

DIV5-A
DIV6-A
code: 
                    <div>
                        <h4>perspective-origin: left:</h4>
                        <div id="div1-A">DIV1-A
                            <div id="div2-A">DIV2-A</div>
                        </div>
                        <h4>perspective-origin: bottom right:</h4>
                        <div id="div3-A">DIV3-A
                            <div id="div4-A">DIV4-A</div>
                        </div>
                        <h4>perspective-origin: -90%:</h4>
                        <div id="div5-A">DIV5-A
                        <div id="div6-A">DIV6-A</div>
                        </div>
                    </div>
                    <style>
                        #div1-A {position: relative; height: 15vw; width: 15vw; margin-left: 6vw; 
                            border: 0.1vw solid blue; perspective: 10vw; perspective-origin: left;}
                        #div2-A, #div4-A, #div6-A {padding: 5vw; position: absolute; border: 0.1vw solid black; 
                            background-color: red; background: rgba(100,100,100,0.5); 
                            transform-style: preserve-3d; transform: rotateX(45deg);}
                        #div3-A {position: relative; height: 15vw; width: 15vw; margin-left: 6vw; 
                            border: 0.1vw solid blue; perspective: 10vw; perspective-origin: bottom right;}
                        #div5-A {position: relative; height: 15vw; width: 15vw; margin-left: 6vw; 
                            border: 0.1vw solid blue; perspective: 10vw; perspective-origin: -90%; }
                    </style>