- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - perspective()
The CSS function perspective() is used in the context of 3D transformations. It is used to define the perspective depth for an element, creating a 3D space in which transformations can occur. It takes a single value as an argument, which represents the distance of the viewer from the z=0 plane. The result is a <transform-function> data type.
The CSS function perspective() is a part of the transform value that is applied on an element, which is to be transformed. The difference between the perspective() function and the properties, perspective and perspective-origin is that, the latter two are related to the parent element of a child that is transformed in a three-dimensional space.
Possible value
The perspective() function takes a single parameter, which can be one of the following:
d: It is a <length> value that represents the distance between the user and the z=0 plane. When the value of d is either 0 or negative, then no perspective transform is applied on the element.
none: No perspective is set on the element.
Syntax
perspective(d)
Either a <length> value or none is passed to the function.
z=0 is the space where everything appears in the two-dimensional view.
Negative values are considered invalid and are syntax errors.
Values less than or equal to zero are clamped to 1px.
Any value other than none result in elements with positive z positions to appear larger, and those with negative z positions to appear smaller.
The elements with z positions equal to or larger than the perspective value, disappear.
When perspective() holds larger values, the transformation is small and vice-versa.
perspective(none) specifies perspective from an infinite distance and thus no transformation applied.
CSS perspective() - Basic Example
Following example demonstrates the use of perspective() function, which shows the various values of parameter d:
<html> <head> <style> .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-size: 100px; text-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; padding: 25px; } .without-perspective { transform: rotateX(-15deg) rotateY(30deg); } .with-perspective-none { transform: perspective(none) rotateX(-15deg) rotateY(30deg); } .with-perspective-larger { transform: perspective(8cm) rotateX(-15deg) rotateY(30deg); } .with-perspective-smaller { transform: perspective(3.1cm) rotateX(-15deg) rotateY(30deg); } .top { background-color:lightyellow; transform: rotateX(90deg) translate3d(0, 0, 50px); } .left { background-color:teal; transform: rotateY(-90deg) translate3d(0, 0, 50px); } .front { background-color: cadetblue; transform: translate3d(0, 0, 50px); } </style> </head> <body> <p>Without perspective:</p> <div class="without-perspective"> <div class="face front">1</div> <div class="face top">2</div> <div class="face left">3</div> </div> <p>With perspective (none):</p> <div class="with-perspective-none"> <div class="face front">1</div> <div class="face top">2</div> <div class="face left">3</div> </div> <p>With perspective (8cm):</p> <div class="with-perspective-larger"> <div class="face front">1</div> <div class="face top">2</div> <div class="face left">3</div> </div> <p>With perspective (3.1cm):</p> <div class="with-perspective-smaller"> <div class="face front">1</div> <div class="face top">2</div> <div class="face left">3</div> </div> </body> </html>
To Continue Learning Please Login
Login with Google