CSS3 3D TRANSFORM

CSS3 3D TRANSFORM

By 3d transform we can rotate the element in 3 direction..

x-axis

y-axis

z-axis

Example:

Go to this link and check out the live example of below codding .

<html>

<head>

<style>

.transform{background-color:#CC3333; color:#FFFFFF; width:100px; height:100px;

font-size:18px; text-align:center; transform: rotateX(317deg); border-radius:40px;}

.transform2{background-color:#6633CC; color:#FFFFFF; width:100px; height:100px;

font-size:18px; text-align:center; transform: rotatey(312deg);border-radius:40px;}

.transform3{background-color:#999933; color:#FFFFFF; width:100px; height:100px;

font-size:18px; text-align:center; transform: rotatez(130deg);border-radius:40px;}

</style>

</head>

<body>

<h1> its css3 transform effects</h1>

<div class="transform"> its 3d Transform (x=axis)</div><br />

<div class="transform2"> its 3d Transform (y=axis)</div><br />

<div class="transform3"> its 3d Transform (z=axis)</div><br />

</body></html>

thanks
Emraan Ali

Css Zilla