CSS TRANSFORMATION, and introduction to 3 dimensional approach

CSS3 is awesome, having its own great importance, it is the field which I love more than canvas and webgl.

Before we get started let us see an example which I have written for this tutorial.

Source : https://desandro.github.io/

Note : If examples don't run 3D transforms, please visit Here

 

---

---

It is assumed that you know the basics of css animations, if not then go through CSS2D animations in which we will be covering the basic usage of @keyframes.
To create 3D animation we need to first specify a 3D space, to do that we set property perspective to some value.
The property perspective is set for the parent element so that child elements can enjoy 3D space ;)

perspective:2000px;

The value of perspective tells how far is the object from user or how much is the depth of the 3D space. Think of it as a distance from the viewer to the object. The greater the value, more the distance. perspective: 2000px; yields a subtle 3D effect, as if we are viewing an object from far away through binoculars. perspective: 100px; produces a tremendous 3D effect, like a tiny insect viewing a massive object.
By default, the vanishing point for a 3D space is positioned at the center. You can change the position of the vanishing point with perspective-originproperty.

perspective-origin: 75% 25%;

---

Getting started

---

Firstly giving perspective to parent element child can be transformed in 3D. The difference is

---

---

Now see the following code 

HTML

<div class="parent">
 <div class="child">
 <h2>Hello world!<h2>
 </div>
</div>

CSS

.parent{
perspective:2000px;
}
.child{
width:200px;
height:200px;
background-color:green;
transform:rotateX(45deg);
}

Hello world!

The transform property is the key to 3d
It consists several functions which are : 

• rotate(angle)
• rotate3d(x,y,z,angle)
• rotateX(angle)
• rotateY(angle)
• rotateZ(angle)
• scale(x,y)
• scale3d(x,y,z)
• scaleX(x)
• scaleY(y)
• scaleZ(z)
• translate(x,y)
• tranalate3d(x,y,z)
• translateX(x)
• translateY(y)
• translateZ(z)
• skewX(angle)
• skewY(angle)
• skew(x-angle,y-angle)

Another point to remember is that when you rotate an element 180deg it shows backface to disable it using backface-visibility:hidden;

---

In each example below we will use following code by default.

CSS

.ele {
 background: #191919;
 width: 200px;
 height: 200px;
 margin: 0 auto;
}

---

“rotate()” function

HTML

<div class="ele r"></div>

CSS

.r {
 transform: rotate(30deg);
}

“rotate3d()” function

The first three parameters give the dorection of the vector and the last parameter tells the direction of rotation. A positive value means clockwise and negative value means anticlockwise

---

HTML

<div class="ele r3d"></div>

CSS

.r3d {
 transform: rotate3d(1,1,1,50deg);
}

“rotateX()” function

HTML

<div class="ele rx"></div>

CSS

.rx {
 transform: rotateX(15deg);
}

“rotateY()” function

HTML

<div class="ele ry"></div>

CSS

.ry {
 transform: rotateY(35deg);
}

“rotateZ()” function

HTML

<div class="ele rz"></div>

CSS

.rz {
 transform: rotateZ(25deg);
}

“scale()” function

HTML

<div class="ele s"></div>

CSS

.s {
 transform: scale(0.8);
}

“scaleX|Y()” function

HTML

<div class="ele sxy"></div>

CSS

.sxy {
 transform: scaleX(1.3);
}

“scaleZ()” function

”scale3d()” function

Visit mdn for better example. Read this stackoverflow answer to understand why to use scaleZ.

HTML

<div class="ele s3d"></div>

CSS

.s3d {
 transform: scale3d(1,1.3,0.8);
}

“translate()” function

HTML

<div class="ele t"></div>

CSS

.t {
 transform: translate(20px,10px);
}

“translateX|Y|Z()” function

HTML

<div class="ele txyz"></div>

CSS

.txyz {
 transform: translateX(30px);
}

“translate3d()” function

View better example at mdn

HTML

<div class="ele t3d"></div>

CSS

.t3d {
 transform: translate3d(-20px,20px,20px);
}

“skew()” function

HTML

<div class="ele skew"></div>

CSS

.skew {
 transform: skew(20deg,15deg);
}

“skewX()” function

HTML

<div class="ele skewx"></div>

CSS

.skewx {
 transform: skewX(10deg);
}

“skewY()” function

HTML

<div class="ele skewy"></div>

CSS

.skewy {
 transform: skewY(15deg);
}

On the way to create animation?
Creating Cube | Creating flying rocket animation