Categories
CSS JavaScript JQuery Web development

CSS Perspective Property, CSS Perspective-orgin Property & 3d Cube

I took me some time to prepare the code examples to this tutorial, but definitely, it was worth to go it through. You can learn a lot of useful stuff, and later create an amazing things using CSS Perspective Property. Let’s start from the beginning!

CSS Perspective property

Today we’ll talk about the CSS Perspective property, then we’ll go to the CSS Perspective-origin property and in the end, we’ll create the 3d cube using CSS. Sounds good, is it? 😀

To see the live outputs of the animation click here, here and here.
  1. CSS Perspective property
  2. CSS Perspective-origin property
  3. 3d Cube

CSS Perspective Property

The CSS perspective property 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 property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

CSS Syntax:

perspective: length|none;

Where:

length– how far the element is placed from the view

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

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 2px solid red;
  perspective: 100px;  
}
#ex2, #ex4 {
  padding: 50px;
  position: absolute;
  border: 2px solid blue;
  background-color: lightpink; 
  transform-style: preserve-3d;
  transform: rotateX(45deg);
  opacity:0.5; 
}
#ex3 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 2px solid green;
  perspective: none;
}
</style>
</head>
<body>

<h1>The perspective Property:</h1>
<h2>perspective: 100px:</h2>
<div id="ex1">Ex1
  <div id="ex2">Ex2</div>
</div>
<h2>perspective: none:</h2>
<div id="ex3">Ex3
  <div id="ex4">Ex4</div>
</div>
</body>

Output:

CSS Perspective-origin Property

The perspective-origin property property defines at from which position the user is looking at the 3D-positioned element.

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

CSS Syntax:

perspective-origin: x-axis y-axis|initial|inherit;

Where:

x-axis – defining where the view is placed at the x-axis (left, center, right, lenght, %). Default value: 50%.

y-axis – defining where the view is placed at the y-axis (top, center, bottom, lenght, %). Default value: 50%.

initial – sets this property to its default value.

inherit – inherits this property from its parent element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 2px solid red;
  perspective: 100px;
  perspective-origin: left;  
}
#ex2, #ex4, #ex6 {
  padding: 50px;
  position: absolute;
  border: 2px solid red;
  background-color: red;
  background: lightpink; 
  opacity:0.5;
  transform-style: preserve-3d;
  transform: rotateX(45deg);
}
#ex3 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 2px solid red;
  perspective: 100px;
  perspective-origin: bottom right;
}
#ex5 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 2px solid red;
  perspective: 100px;
  perspective-origin: -90%;  
}
</style>
</head>
<body>
<h1>The perspective-origin Property:</h1>
<h2>perspective-origin: left:</h2>
<div id="ex1">Ex1
  <div id="ex2">Ex2</div>
</div>
<h2>perspective-origin: bottom right:</h2>
<div id="ex3">Ex3
  <div id="ex4">Ex4</div>
</div>
<h2>perspective-origin: -90%:</h2>
<div id="ex5">Ex5
  <div id="ex6">Ex6</div>
</div>
</body>
</html>

Output:

3d Cube

Using all knowledge from above we can create now a 3d cube.

We can create cubes setting different perspectives.

Example1:

Perspective: 150px;

<!DOCTYPE html>
<html>
<head>
<style>

.ex1 {
  perspective: 150px;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background: lightpink;
  opacity:0.5;
  border: 1px solid green;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>

<div class="ex1">
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>

</body>
</html>

Output:

Example2:

Perspective: 800px:

<!DOCTYPE html>
<html>
<head>
<style>
.ex2 {
  perspective: 800px;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background: lightpink;
  opacity:0.5;
  border: 1px solid green;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>

<div class="ex2">
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>
</body>
</html>

Output:

To see how to animate the cube using JavaScript and JQuary click here.

To see more examples of the 3d cubes click here and here.

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *