The perspective property gives 3D elements a perspective view.
Perspective defines how far away the object is from the user.
This property is assigned to a parent element.
Only child elements will get a perspective view.
A 3D transformed child element.
Its parent provides the perspective view.
<style>
.perspective {
padding: 50px;
perspective: 100px;
margin-left: 10px;
}
.rotate {
width: 150px;
padding: 30px;
text-align: center;
background: lightblue;
transform: rotateX(15deg);
}
</style>
<div class="perspective">
<div class="rotate">Rotated box</div>
</div>
Tip: Lower perspective values give a stronger 3D effect, and 0 gives no effect.
perspective: length | none | initial | inherit;
| Value | Description |
|---|---|
length |
Placement length (distance) of the element from the view |
none |
Default, same as 0. No perspective is set |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
Creating a perspective cube.
<style>
.cube-perspective {
width: 200px;
height: 200px;
margin: 80px 80px;
position: relative;
display: inline-block;
perspective: 1800px;
perspective-origin: -250% -150%;
}
.cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: translateZ(-100px);
}
.cube div:not(:last-of-type) {
width: 196px;
height: 196px;
display: block;
position: absolute;
border: 2px solid firebrick;
}
.cube .front {
background-color: pink;
transform: rotateY(0deg) translateZ(100px);
}
.cube .back {
background-color: red;
transform: rotateX(180deg) translateZ(100px);
}
.cube .right {
background-color: purple;
transform: rotateY(90deg) translateZ(100px);
}
.cube .left {
background-color: red;
transform: rotateY(-90deg) translateZ(100px);
}
.cube .top {
background-color: brown;
transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom {
background-color: orange;
transform: rotateX(-90deg) translateZ(100px);
}
</style>
<section class="cube-perspective">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="right"></div>
<div class="left"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</section>
A 3D animations can be created with the help of the CSS perspective property. Try it live in our CSS editor and move your mouse around.
<style>
.room-perspective {
width: 100%;
height: 100%;
margin: 0;
perspective: 1000px;
}
.room {
width: 100%;
height: 300px;
transform-style: preserve-3d;
transform-origin: center;
}
.room div {
position: absolute;
width: 100%;
height: 100%;
background-color: #0ff;
background-image: url("/img/css/wall.jpg")
}
.w-back {
transform: translateZ(-500px);
}
.w-top {
top: 0;
left: 0;
transform-origin: center top;
transform: rotateX(-90deg);
}
.w-bottom {
bottom: 0;
left: 0;
background-image: url("/img/css/floor.jpg") !important;
transform-origin: center bottom;
transform: rotateX(90deg);
}
.w-right {
top: 0;
right: 0;
transform-origin: right center;
transform: rotateY(-90deg);
}
.w-left {
top: 0;
left: 0;
transform-origin: left center;
transform: rotateY(90deg);
}
.w-bottom {
color: #fff;
text-shadow: 1px 1px 2px #000;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
$(document).on("mousemove", function (e) {
var Xperc = e.pageX / $(window).width();
var Yperc = e.pageY / $(window).height();
posx = 100 - Math.floor(Xperc * 100);
posy = 100 - Math.floor(Yperc * 100);
$("section").css({ perspectiveOrigin: posx + '% ' + posy + '%' });
});
$("section").on("mousewheel", function (n, i) {
var per = parseInt($(this).css("perspective"), 10);
if ((i < 0) && (per < 2200)) {
$("section").css({ perspective: '+=50px' });
}
if ((i > 0) && (per > 600)) {
$("section").css({ perspective: '-=50px' });
}
})
</script>
<section class="room-perspective">
<div class="room">
<div class="w-back"></div>
<div class="w-top"></div>
<div class="w-bottom"></div>
<div class="w-right"></div>
<div class="w-left"></div>
</div>
</section>
This table shows when perspective support started for each browser.
 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 |
