2D Transform Techniques using CSS
Gone are the days of using Flash and GIF images for creating animated graphics. It is time to show off some of the best CSS3 capabilities.
With CSS3 2D transform feature you can perform basic transform manipulations such as move, rotate, scale and skew on elements in a two-dimensional space.
CSS3 2D transform gives you more freedom to decorate and animate HTML components. You have even more features to decorate text and more animation options for decorating div elements.
The CSS3 transform property uses the transform functions to manipulate the coordinate system used by an element in order to apply the transformation effect.
CSS3 2D transform contains some basic functions like below:
translate()rotate()scale()skew()matrix()
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
</head>
<style>
body{
font-family: arial,helvetica;
background-color:white;
}
#box
{
width: 250px;
height: 150px;
background: hotpink;
margin: 150px 300px;
transform: skewX(50deg);
font-size: 50px;
box-shadow: 0px 22px 30px 0px gray;
}
#box:hover{
transform:rotate(30deg) scale(2);
}
</style>
<body>
<h1>2D Transform</h1>
<div id="box">Hover Me</div>
</body>
</html>
Leave a Reply