Using Transforms In CSS3
As I sit here having my lunch and thinking about how to start writing my first tutorial, I wonder how people write such beautiful pieces of text when I can't even figure out how to start.
Well........gathering all the courage to get rid of the butterflies in my stomach, let me share with you a step by step tutorial of how I learnt to use Transforms in CSS3
What Actually Are Transforms?
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
Let's Get Started
First let me tell you what we want to do exactly. Please click this CodePen link (hover over the image to see what we actually want to do)
Scared?? So was I. But I assure you it is worth it!!
The HTML First
<body>
<div class ="container">
<a href="#">
</a>
</div>
</body>
Here I am writing only the body part for the sake of convenience, but I advise you to write the entire HTML (as per the Document Structure of HTML) part in your text editors.
I have defined a div element with a class = "container" ( class name is solely for the purpose of styling) and an anchor a element inside that.
Easy right? I told you 
Now to the Main Point: CSS
First, we need to reset the default margin and padding of the page.
*{
margin: 0;
padding: 0;
}
Next we want to apply a background image to the HTML and body that fill up the entire browser window.
html,body{
min-height: 100%;
}
We apply a radial gradient to the div element, specifying a height as well as a perspective for it. The perspective property defines how many pixels a 3D element is placed from the view. This property allows us to change the perspective on how 3D elements are viewed. The perspective property only affects 3D transformed elements!
.container{
background-image: -webkit-radial-gradient(bottom, #FFFFFF 0%, #0A0AEA 100%);
background-image: radial-gradient(to top, #FFFFFF 0%, #0A0AEA 100%);
height: 645px;
perspective:1000px;
}
Let us have a look at whatever we have done so far!!!
Great!!!!
Next we come to the anchor a tag. This is the place where our actual work starts. We use the image as a background image for this element and apply the necessary styling to position the image at the center of the page.
The transform-style property, when applied to an element, determines if that element's children are positioned in 3D space, or flattened. Here we use transform-style:preserve-3d; which indicates that the children of the element should be positioned in 3d-space.
Transitions allow us to change property values smoothly (from one value to another), over a given duration.To create a transition effect, we must specify two things:
- the CSS property we want to add an effect to
- the duration of the effect
Here we want to apply the transition effect to all properties for a duration of 0.5 seconds.
a{
background: url("http://goo.gl/uYwg84") no-repeat;
position: absolute;
top: 50%;
left: 50%;
height: 260px;
width: 400px;
margin-top: -200px;
margin-left: -200px;
background-size:0 cover;
transform-style:preserve-3d;
transition:all 0.5s;
}
The hover selector is used to select elements when we mouse over them. Here we are rotating the image by 80 deg with respect to the bottom axis on hover.
.container a:hover{
-webkit-transform:rotateX(80deg);
transform:rotateX(80deg);
-webkit-transform-origin:bottom;
transform-origin:bottom;
}
The Next Preview:
We want to position an element at the bottom of the image.
.container a:after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 36px;
background: inherit;
background-size: cover, cover;
background-position: bottom;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
And now we are ready with what we wanted to get!!
I hope this tutorial was helpful for all of you. If you have any queries please feel free to post them in the comments section below. I will reply to all of them.
Keep learning. Cheers!!
