rick@tillitsdone.com

+66824564755

Scroll to discover

CSS Perspective-Origin Enhancing 3D Transformations

CSS perspective-origin sets the vanishing point for 3D transforms, enhancing visual depth.

Learn syntax, values, and examples to apply this property effectively.

Introduction

The perspective-origin CSS property defines the viewer’s position in 3D space, creating a realistic depth effect for transformed elements. By using perspective-origin, you can control how 3D objects look on your web page, making your designs more engaging. This feature is widely supported across browsers, ensuring your 3D effects work for a broad audience.

Description

The perspective-origin CSS property determines the position from which the viewer is looking at a 3D-transformed element. This position acts as the vanishing point, influencing how the perspective is rendered by the perspective property. Unlike the perspective() transform function, which is applied directly to the element being transformed, the perspective-origin and perspective properties are applied to the parent element. This allows you to control the perspective of child elements in a 3D space, creating visually appealing and dynamic effects.

Syntax

The perspective-origin CSS property can be defined using one or two values to set the x-position and y-position of the vanishing point. Here’s how you can use it:

/* One-value syntax */
perspective-origin: x-position;

/* Two-value syntax */
perspective-origin: x-position y-position;

/* When both x-position and y-position are keywords, the following is also valid */
perspective-origin: y-position x-position;

/* Global values */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: revert;
perspective-origin: revert-layer;
perspective-origin: unset;

Values

x-position

The x-position value indicates the horizontal position of the vanishing point. It can be specified using the following values:

<length-percentage>: An absolute length value or a percentage relative to the width of the element. This value can be negative.
left: A keyword that is a shortcut for the 0 length value.
center: A keyword that is a shortcut for the 50% percentage value.
right: A keyword that is a shortcut for the 100% percentage value.

y-position

The y-position value indicates the vertical position of the vanishing point. It can be specified using the following values:

<length-percentage>: An absolute length value or a percentage relative to the height of the element. This value can be negative.
top: A keyword that is a shortcut for the 0 length value.
center: A keyword that is a shortcut for the 50% percentage value.
bottom: A keyword that is a shortcut for the 100% percentage value.

Global Values

In addition to the specific position values, the perspective-origin property supports several global values:

inherit: Inherits the value from the parent element.
initial: Sets the value to its default value, which is 50% 50%.
revert: Resets the value to the user agent’s default value.
revert-layer: Resets the value to the default value of the nearest ancestor with a specified value, if any.
unset: Resets the value to its inherited value if it inherits, or to its initial value if it does not.

Examples

Changing the Perspective Origin

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Perspective Origin Example</title>
  <style>
    .container {
      perspective: 500px;
      perspective-origin: center center;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 50px auto;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transform: rotateX(45deg) rotateY(45deg);
      margin: 100px auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Rotated Box</div>
  </div>
</body>
</html>

Adjusting the Perspective Origin with Keywords

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Perspective Origin with Keywords</title>
  <style>
    .container {
      perspective: 500px;
      perspective-origin: left top;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 50px auto;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transform: rotateX(45deg) rotateY(45deg);
      margin: 100px auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Rotated Box</div>
  </div>
</body>
</html>

Using Length and Percentage Values

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Perspective Origin with Length and Percentage</title>
  <style>
    .container {
      perspective: 500px;
      perspective-origin: 50% 50%;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 50px auto;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transform: rotateX(45deg) rotateY(45deg);
      margin: 100px auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Rotated Box</div>
  </div>
</body>
</html>

Specifications

The perspective-origin CSS property is part of the CSS Transforms Module Level 2. This module defines the properties and transform functions used to create 3D transformations on web elements. The specifications for the perspective-origin property can be found in the official CSS Transforms Module Level 2 documentation.

CSS Transforms Module Level 2

Specification
[CSS Transforms Module Level 2 - perspective-origin property]WebsiteUrl

Browser Compatibility

The perspective-origin property is widely supported across different browsers, ensuring consistent 3D transformations for a broad audience. Here’s a quick overview:

Browser	Version	Release Date
Chrome	36.0	Jul 2014
Firefox	16.0	Oct 2012
IE/Edge	10.0	Sep 2012
Opera	23.0	Jul 2013
Safari	9.0	Sep 2015

For the latest compatibility details, check the Browser Compatibility Data (BCD) tables on MDN Web Docs.

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.