DEV Community

Cover image for Bringing perspective to CSS
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

31 7

Bringing perspective to CSS

The other day I started exploring 3D in CSS and began with a dice.
The dice is excellent in 3D. However, it has no perspective, so it's still 2D in 3D.

Let's fix that and bring some perspective to 3D.

If we stop the rotation on the dice and look at it from the front, you can see the overlap, but all sides are equally big.

This is a bit weird, as the back panel should be smaller as it sits more to the back.

3D cube in CSS

CSS perspective

That's precisely where the perspective style can come into play.

Let's apply the following style to the body tag:

body {
  perspective: 400px;
}
Enter fullscreen mode Exit fullscreen mode

3D css perspective

A crazy difference already, right?

You can play around with the value. The lower you go, the more intense the 3D becomes.

We also get perspective-origin, which can define from which angle you are looking at an object.

The default value is 50% 50%, and we can use values we know from position to set it.

body {
  perspective-origin: left;
}
Enter fullscreen mode Exit fullscreen mode

This will set the perspective to the left.

CSS perspective origin

As you can see, this becomes a bit weird, and you can make the perspective a bit bigger to get the correct display.

Playing with perspective can give your 3D css that next-level feeling.

Feel free to play around with the adjusted dice.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (10)

Collapse
 
thomasbnt profile image
Thomas Bnt

😱🤯🤯

Collapse
 
dailydevtips1 profile image
Chris Bongers

Pretty bizarre how far CSS support has come these days 🤯

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

I didn‘t kniw that! Wow, pretty amazing! Thanks for sharing tho‘

Collapse
 
dailydevtips1 profile image
Chris Bongers

Happy to share, it's crazy to see how far CSS has come 🤯

Collapse
 
shaikmoabdullah profile image
Shaik Mohammad Abdullah

This is amazing. Let me try this.

Collapse
 
jlrxt profile image
Jose Luis Ramos T.

Excelente muy útil gracias por compartir.

Collapse
 
kachiic profile image
Kachi Cheong

This is brilliant! The fact this was all CSS and no JS! Very good job.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Exactly!
Really blown away by the support that CSS has these days

Collapse
 
kings5660 profile image
Kingsley

Interesting. Thank you for the post

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks, glad you enjoyed it Kingsley 🙏

Image of Stellar post

Check out Episode 1: How a Hackathon Project Became a Web3 Startup 🚀

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

👋 Kindness is contagious

Explore this insightful post in the vibrant DEV Community. Developers from all walks of life are invited to contribute and elevate our shared know-how.

A simple "thank you" could lift spirits—leave your kudos in the comments!

On DEV, passing on wisdom paves our way and unites us. Enjoyed this piece? A brief note of thanks to the writer goes a long way.

Okay