Skip to main content

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 : 
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

Comments

Post a Comment