<div style="width:900px; text-align:left; margin: 0px auto 0px auto; padding:20px;">
<span class="navpart">CSS Transformations</span>
<br />
<div class="left">
<div style="float:right; margin: 0px 0px 0px 20px; height:210px;">
<div class="showbor" id="grow1">g<br />r<br />o<br />w</div></div>
<span class="bolet">Transition:</span> Type of transition, speed in seconds.
<br />
div#grow1 { width:25px; height:80px; transition: height 2s;
-moz-transition: height 2s; -webkit-transition: height 2s; }
<br />
div#grow1:hover { height:200px; }
<br />
<div style="float:left; margin: 10px 10px 10px 0px; width:160px;">
<div class="showbor" id="grow2"> stretch</div></div>
div#grow2 { width:80px; height:25px; transition: width 2s;
-moz-transition: width 2s; -webkit-transition: width 2s; }
<br />
div#grow2:hover { width:150px; }
<br /><br />
<span class="bolet">Translate:</span> The first value is horizontal and the second is vertical. Positive values move right and negative values move left.
<br />
<table style="margin:10px 0px 10px 20px; float:right;"><tr>
<td><div class="showbor" id="move1">move 1</div></td>
<td style="width:100px;"> </td>
<td><div class="showbor" id="move2">move 2</div></td>
</tr></table>
div#move1, div#move2 { transition: transform 2s; -webkit-transition: transform 2s; -moz-transition: transform 2s; }
<br />
div#move1:hover { transform: translate(100px,0px); -webkit-transform: translate(100px,0px); -moz-transform: translate(100px,0px); }
<br />
div#move2:hover { transform: translate(-100px,0px); -webkit-transform: translate(-100px,0px) -moz-transform: translate(-100px,0px) }
<br /><br />
<table style="float:left; margin:10px 20px 20px 0px;"><tr>
<td><div class="showbor" id="rotate1">-50</div></td>
<td><div class="showbor" id="rotate2">-90</div></td>
<td><div class="showbor" id="rotate3">180</div></td>
<td><div class="showbor" id="rotate4">270</div></td>
<td><div class="showbor" id="rotate5">340</div></td>
</tr></table>
<span class="bolet">Rotate:</span> Positive values rotate right and negative values rotate left.
<br />
div#rotate3 { transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
<br />
<table style="float:right; margin:10px 0px 10px 20px;"><tr>
<td><div class="showbor" id="rotate6">50</div></td>
<td><div class="showbor" id="rotate7">90</div></td>
<td><div class="showbor" id="rotate8">180</div></td>
<td><div class="showbor" id="rotate9">-270</div></td>
<td><div class="showbor" id="rotate10">-340</div></td>
</tr></table>
div#rotate7, div#rotate10 { transition: transform 2s; -webkit-transition: transform 2s; -moz-transition: transform 2s; }
<br />
div#rotate7:hover { transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); }
<br />
div#rotate10:hover { transform:rotate(-340deg); -moz-transform:rotate(-340deg); -webkit-transform:rotate(-340deg); }
<br /><br />
<div style="display:inline-block; padding:0px 10px 15px 10px; float:left; text-align:center;">20 20<br />
<div class="showbor" id="twist1" style="margin:10px auto 0px auto; text-align:center;">1</div></div>
<div style="display:inline-block; padding:0px 10px 15px 10px; float:left; text-align:center;">30 0<br />
<div class="showbor" id="twist2" style="margin:10px auto 0px auto; text-align:center;">2</div></div>
<div style="display:inline-block; padding:0px 10px 15px 10px; float:left; text-align:center;">0 30<br />
<div class="showbor" id="twist3" style="margin:10px auto 0px auto; text-align:center;">3</div></div>
<div style="display:inline-block; padding:0px 10px 15px 10px; float:left; text-align:center;">-20 -20<br />
<div class="showbor" id="twist4" style="margin:10px auto 0px auto; text-align:center;">4</div></div>
<div style="display:inline-block; padding:0px 10px 15px 10px; float:left; text-align:center;">-30 0<br />
<div class="showbor" id="twist5" style="margin:10px auto 0px auto; text-align:center;">5</div></div>
<div style="display:inline-block; padding:0px 10px 15px 10px; float:left; text-align:center; margin:0px 20px 0px 0px;">0 -30<br />
<div class="showbor" id="twist6" style="margin:10px auto 0px auto; text-align:center;">6</div></div>
<span class="bolet">Skew:</span>
First positive: stretch upper left and lower right corners horizontally.
<br />
Second positive: stretch upper left and lower right corners vertically.
<br />
First negative: stretch upper right and lower left corners horizontally.
<br />
Second negative: stretch upper right and lower left corners vertically.
<br /><br />
<div style="display:inline-block; padding:0px 10px 15px 10px; float:right; text-align:center;">0 -30<br />
<div class="showbor" id="twist12" style="margin:10px auto 0px auto; text-align:center;">12</div></div>
<div style="display:inline-block; padding:0px 10px 15px 10px; float:right; text-align:center;">-30 0<br />
<div class="showbor" id="twist11" style="margin:10px auto 0px auto; text-align:center;">11</div></div>
<div style="display:inline-block; padding:0px 10px 15px 10px; float:right; text-align:center;">-20 -20<br />
<div class="showbor" id="twist10" style="margin:10px auto 0px auto; text-align:center;">10</div></div>
<div style="display:inline-block; padding:0px 10px 15px 10px; float:right; text-align:center;">0 30<br />
<div class="showbor" id="twist9" style="margin:10px auto 0px auto; text-align:center;">9</div></div>
<div style="display:inline-block; padding:0px 10px 15px 10px; float:right; text-align:center;">30 0<br />
<div class="showbor" id="twist8" style="margin:10px auto 0px auto; text-align:center;">8</div></div>
<div style="display:inline-block; padding:0px 10px 15px 10px; float:right; text-align:center; margin:0px 0px 0px 20px;">20 20<br />
<div class="showbor" id="twist7" style="margin:10px auto 0px auto; text-align:center;">7</div></div>
div#twist1 { transform: skew(20deg,20deg);
-webkit-transform: skew(20deg,20deg); -moz-transform: skew(20deg,20deg); }
<br />
div#twist7 { height:30px; width:30px; transition: transform 1s;
-webkit-transition: transform 1s; -moz-transition: transform 1s; }
<br />
div#twist7:hover { transform: skew(20deg,20deg);
-webkit-transform: skew(20deg,20deg); -moz-transform: skew(20deg,20deg); }
<br /><br />
<table style="float:left; margin:0px 20px 10px 0px;"><tr>
<td class="ro3d"><div class="showbor" id="ro3d2">Y70</div></td>
<td class="ro3d"><div class="showbor" id="ro3d3">X180</div></td>
<td class="ro3d"><div class="showbor" id="ro3d4">Y250</div></td>
</tr><tr>
<td style="height:10px;" colspan="3"></td>
</tr><tr>
<td class="ro3d"><div class="showbor" id="ro3d6">Y70</div></td>
<td class="ro3d"><div class="showbor" id="ro3d7">X180</div></td>
<td class="ro3d"><div class="showbor" id="ro3d8">Y250</div></td>
</tr></table>
<span class="bolet">3D Rotation:</span> X is horizontal and Y is vertical.
<br />
div#ro3d3, div#ro3d4 { height:30px; width:70px; transition: transform 2s;
-webkit-transition: transform 2s; -moz-transition: transform 2s; }
<br />
div#ro3d3:hover { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
<br />
div#ro3d4:hover { transform: rotateY(250deg); -webkit-transform: rotateY(250deg); -moz-transform: rotateY(250deg); }
<br /><br />
<div style="padding:10px; float:right; display:inline-block;"> <div class="showbor scale0" id="scale1"> </div>
transform: scale(2,1); </div>
<div style="padding:10px; float:right; display:inline-block;"> <div class="showbor scale0" id="scale2"> </div>
transform: scale(1,2); </div>
<div style="padding:10px; float:right; display:inline-block;"> <div class="showbor scale0" id="scale3"> </div>
transform: scale(0.5,0.5); </div>
<div style="padding:10px 10px 10px 20px; float:right; display:inline-block;"> <div class="showbor scale0" id="scale4"> </div>
transform: scale(2,2); </div>
<span class="bolet">Scale:</span>
This changes the size of an element,but other elements next to it will remain as if the scaled element was in its original size.
The hover examples use transition: transform 2s; -webkit-transition: transform 2s; -moz-transition: transform 2s;
The first number is width and the second is height, decimals are allowed.
-moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1);
<br /><br />
<table style="float:left; margin:0px 20px 10px 0px;"><tr>
<td colspan="2">1,1,1,70deg</td>
<td colspan="2">1,1,1,-70deg</td>
</tr><tr>
<td class="twisted"><div class="showbor" id="comb1"></div></td>
<td class="twisted"><div class="showbor" id="comb5"></div></td>
<td class="twisted"><div class="showbor" id="comb2"></div></td>
<td class="twisted"><div class="showbor" id="comb6"></div></td>
</tr><tr>
<td style="height:15px;" colspan="4"></td>
</tr><tr>
<td colspan="2">2,0,1,90deg</td>
<td colspan="2">0,2,1,-90deg</td>
</tr><tr>
<td class="twisted"><div class="showbor" id="comb3"></div></td>
<td class="twisted"><div class="showbor" id="comb7"></div></td>
<td class="twisted"><div class="showbor" id="comb4"></div></td>
<td class="twisted"><div class="showbor" id="comb8"></div></td>
</tr></table>
<span class="bolet">Multi-dimension 3D Rotation:</span>
transform: rotate3d(1,2,3,50deg);
-webkit-transform: rotate3d(1,2,3,50deg); -moz-transform: rotate3d(1,2,3,50deg);
<br /><br />
The first one is the x (horizontal) rotation, the second is the y (vertical) rotation and the third is the z (3d) rotation.
The last number is the only one defined in degrees.
The first 3 numbers are all based on that angle according to their relation to each other, rather than the numbers themselves.
<br /><br />
div#comb1 { height:30px; width:30px; transition: transform 2s;
-webkit-transition: transform 2s; -moz-transition: transform 2s; }
<br />
div#comb1:hover { transform: rotate3d(1,1,1,70deg);
-webkit-transform: rotate3d(1,1,1,70deg); -moz-transform: rotate3d(1,1,1,70deg); }
<br /><br />
<span class="bolet">3D Perspective:</span>
The perspective CSS lets you change the view point from which you see the 3D elements inside the element with the perspective.
The perspective and perspective-origin go in the container div and the transform:rotate goes on the 3d element inside.
<br /><br />
perspective:200px; -webkit-perspective:200px; -moz-perspective:200px;
perspective-origin: 50% 0%; -webkit-perspective-origin: 50% 0%; -moz-perspective-origin: 50% 0%;
</div>
<div style="display:inline-block;"> <div id="dime1b"> <div class="showbor" id="dime1a">
</div> perspective-origin:50% 0%; <br /> perspective:100px; <br /> transform: rotateX(50deg); </div> </div>
<div style="display:inline-block;"> <div id="dime2b"> <div class="showbor" id="dime2a">
</div> perspective-origin:0% 50%; <br /> perspective:100px; <br /> transform: rotateY(30deg); </div> </div>
<div style="display:inline-block;"> <div id="dime3b"> <div class="showbor" id="dime3a">
</div> perspective:70px; <br /> <span class="itlet">transform: rotateY(-50deg);</span> <br /> transition: transform 2s; </div> </div>
<div style="display:inline-block;"> <div id="dime4b"> <div class="showbor" id="dime4a">
</div> perspective-origin:0% 30%; <br /> perspective:100px; <br /> transform: rotateX(50deg); <br /> transition: transform 2s; </div> </div>
<br /><br />
<a href="http://azurelight.net">AzureLight.net</a> |
<a href="http://mikaristar.deviantart.com">MikariStar.DeviantArt.com</a> |
<a href="http://artrift.com/Mikari/">ArtRift.com/Mikari/</a> |
<a href="http://miliazure.wordpress.com">MiliAzure.WordPress.com</a>
</div>
body { padding:0px; margin:0px; font-family:Arial; font-size:14px; line-height:20px;
color:#393939; background-color:#c2f0ff; text-align:center; }
::-webkit-scrollbar { width: 10px; height:10px; }
::-webkit-scrollbar-track { background-color:#c2f0ff; }
::-webkit-scrollbar-thumb { border-radius: 20px; background-color:#ff9adc; border: 0px none; }
.showbor { border:0px none; border:3px dotted #ff9adc; padding:0px; }
a { color:#ff71ce; text-decoration:none; }
div#grow1 { width:25px; height:80px; transition: height 2s;
-moz-transition: height 2s; -webkit-transition: height 2s;
text-align:center; line-height:14px; }
div#grow1:hover { height:200px; }
div#grow2 { width:80px; height:25px; transition: width 2s;
-moz-transition: width 2s; -webkit-transition: width 2s;
margin: 0px 0px 0px 0px; text-align:left; }
div#grow2:hover { width:150px; }
div#rotate1, div#rotate2, div#rotate3, div#rotate4, div#rotate5, div#rotate6, div#rotate7, div#rotate8, div#rotate9, div#rotate10 { text-align:center; width:50px; height:25px; margin: 0px 5px 0px 5px; }
div#rotate1 { transform: rotate(-50deg); -moz-transform: rotate(-50deg); -webkit-transform: rotate(-50deg); }
div#rotate2 { transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); }
div#rotate3 { transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
div#rotate4 { transform: rotate(270deg); -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); }
div#rotate5 { transform: rotate(340deg); -moz-transform: rotate(340deg); -webkit-transform: rotate(340deg); }
div#rotate6, div#rotate7, div#rotate8, div#rotate9, div#rotate10 {
transition: transform 2s; -webkit-transition: transform 2s; -moz-transition: transform 2s; }
div#rotate6:hover { transform:rotate(50deg); -moz-transform:rotate(50deg); -webkit-transform:rotate(50deg); }
div#rotate7:hover { transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); }
div#rotate8:hover { transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); }
div#rotate9:hover { transform:rotate(-270deg); -moz-transform:rotate(-270deg); -webkit-transform:rotate(-270deg); }
div#rotate10:hover { transform:rotate(-340deg); -moz-transform:rotate(-340deg); -webkit-transform:rotate(-340deg); }
div#move1, div#move2 { transition: transform 2s; -webkit-transition: transform 2s; -moz-transition: transform 2s;
width:80px; height:25px; text-align:center; }
div#move1:hover { transform: translate(100px,0px);
-webkit-transform: translate(100px,0px); -moz-transform: translate(100px,0px); }
div#move2:hover { transform: translate(-100px,0px);
-webkit-transform: translate(-100px,0px); -moz-transform: translate(-100px,0px); }
td.twisted { width:80px; padding:10px 0px 0px 0px; text-align:center; }
div#twist1, div#twist2, div#twist3, div#twist4, div#twist5, div#twist6 { margin:0px auto 0px auto;
height:30px; width:30px; }
div#twist1 { transform: skew(20deg,20deg); -webkit-transform: skew(20deg,20deg); -moz-transform: skew(20deg,20deg); }
div#twist2 { transform: skew(30deg,0deg); -webkit-transform: skew(30deg,0deg); -moz-transform: skew(30deg,0deg); }
div#twist3 { transform: skew(0deg,30deg); -webkit-transform: skew(0deg,30deg); -moz-transform: skew(0deg,30deg); }
div#twist4 { transform: skew(-20deg,-20deg); -webkit-transform: skew(-20deg,-20deg); -moz-transform: skew(-20deg,-20deg); }
div#twist5 { transform: skew(-30deg,0deg); -webkit-transform: skew(-30deg,0deg); -moz-transform: skew(-30deg,0deg); }
div#twist6 { transform: skew(0deg,-30deg); -webkit-transform: skew(0deg,-30deg); -moz-transform: skew(0deg,-30deg); }
div#twist7, div#twist8, div#twist9, div#twist10, div#twist11, div#twist12 { margin:0px auto 0px auto; height:30px; width:30px;
transition: transform 1s; -webkit-transition: transform 1s; -moz-transition: transform 1s; }
div#twist7:hover { transform: skew(20deg,20deg); -webkit-transform: skew(20deg,20deg); -moz-transform: skew(20deg,20deg); }
div#twist8:hover { transform: skew(30deg,0deg); -webkit-transform: skew(30deg,0deg); -moz-transform: skew(30deg,0deg); }
div#twist9:hover { transform: skew(0deg,30deg); -webkit-transform: skew(0deg,30deg); -moz-transform: skew(0deg,30deg); }
div#twist10:hover { transform: skew(-20deg,-20deg); -webkit-transform: skew(-20deg,-20deg); -moz-transform: skew(-20deg,-20deg); }
div#twist11:hover { transform: skew(-30deg,0deg); -webkit-transform: skew(-30deg,0deg); -moz-transform: skew(-30deg,0deg); }
div#twist12:hover { transform: skew(0deg,-30deg); -webkit-transform: skew(0deg,-30deg); -moz-transform: skew(0deg,-30deg); }
td.ro3d { width:110px; text-align:center; }
div#ro3d1, div#ro3d2 { margin:0px auto 0px auto; height:30px; width:70px;
transition: transform 1s; -webkit-transition: transform 1s; -moz-transition: transform 1s; }
div#ro3d3, div#ro3d4 { margin:0px auto 0px auto; height:30px; width:70px;
transition: transform 2s; -webkit-transition: transform 2s; -moz-transition: transform 2s; }
div#ro3d1:hover { transform: rotateX(50deg); -webkit-transform: rotateX(50deg); -moz-transform: rotateX(50deg); }
div#ro3d2:hover { transform: rotateY(70deg); -webkit-transform: rotateY(70deg); -moz-transform: rotateY(70deg); }
div#ro3d3:hover { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
div#ro3d4:hover { transform: rotateY(250deg); -webkit-transform: rotateY(250deg); -moz-transform: rotateY(250deg); }
div#ro3d5, div#ro3d6, div#ro3d7, div#ro3d8 { margin:0px auto 0px auto; height:30px; width:70px; }
div#ro3d5 { transform: rotateX(50deg); -webkit-transform: rotateX(50deg); -moz-transform: rotateX(50deg); }
div#ro3d6 { transform: rotateY(70deg); -webkit-transform: rotateY(70deg); -moz-transform: rotateY(70deg); }
div#ro3d7 { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
div#ro3d8 { transform: rotateY(250deg); -webkit-transform: rotateY(250deg); -moz-transform: rotateY(250deg); }
div.scale0 { transition: transform 2s; -webkit-transition: transform 2s; -moz-transition: transform 2s;
width:25px; height:25px; margin:0px auto 0px auto; }
div#scale1 { -moz-transform: scale(2,1); -webkit-transform: scale(2,1); transform: scale(2,1); }
div#scale2:hover { -moz-transform: scale(1,2); -webkit-transform: scale(1,2); transform: scale(1,2); }
div#scale3 { -moz-transform: scale(0.5,0.5); -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); }
div#scale4:hover { -moz-transform: scale(2,2); -webkit-transform: scale(2,2); transform: scale(2,2); }
div#comb1, div#comb2, div#comb3, div#comb4 { margin:0px auto 0px auto; height:30px; width:30px;
transition: transform 2s; -webkit-transition: transform 2s; -moz-transition: transform 2s; }
div#comb1:hover { transform: rotate3d(1,1,1,70deg); -webkit-transform: rotate3d(1,1,1,70deg); -moz-transform: rotate3d(1,1,1,70deg); }
div#comb2:hover { transform: rotate3d(1,1,1,-70deg); -webkit-transform: rotate3d(1,1,1,-70deg); -moz-transform: rotate3d(1,1,1,-70deg); }
div#comb3:hover { transform: rotate3d(2,0,1,90deg); -webkit-transform: rotate3d(2,0,1,90deg); -moz-transform: rotate3d(2,0,1,90deg); }
div#comb4:hover { transform: rotate3d(0,2,1,-90deg); -webkit-transform: rotate3d(0,2,1,-90deg); -moz-transform: rotate3d(0,2,1,-90deg); }
div#comb5, div#comb6, div#comb7, div#comb8 { margin:0px auto 0px auto; height:30px; width:30px; }
div#comb5 { transform: rotate3d(1,1,1,70deg); -webkit-transform: rotate3d(1,1,1,70deg); -moz-transform: rotate3d(1,1,1,70deg); }
div#comb6 { transform: rotate3d(1,1,1,-70deg); -webkit-transform: rotate3d(1,1,1,-70deg); -moz-transform: rotate3d(1,1,1,-70deg); }
div#comb7 { transform: rotate3d(2,0,1,90deg); -webkit-transform: rotate3d(2,0,1,90deg); -moz-transform: rotate3d(2,0,1,90deg); }
div#comb8 { transform: rotate3d(0,2,1,-90deg); -webkit-transform: rotate3d(0,2,1,-90deg); -moz-transform: rotate3d(0,2,1,-90deg); }
div#dime1a, div#dime2a, div#dime3a, div#dime4a { width:50px; height:50px; margin:10px auto 10px auto;
transition: transform 2s; -moz-transition: transform 2s; -webkit-transition: transform 2s; }
div#dime1b, div#dime2b, div#dime3b, div#dime4b { text-align:center; }
div#dime1a { transform: rotateX(50deg); -moz-transform: rotateX(50deg); -webkit-transform: rotateX(50deg); }
div#dime1b { perspective:100px; perspective-origin:50% 0%;
-webkit-perspective:100px; -webkit-perspective-origin:50% 0%;
-moz-perspective:100px; -moz-perspective-origin:50% 0%; }
div#dime2a { transform: rotateY(30deg); -moz-transform: rotateY(30deg); -webkit-transform: rotateY(30deg); }
div#dime2b { perspective:100px; perspective-origin:0% 50%;
-webkit-perspective:100px; -webkit-perspective-origin:0% 50%;
-moz-perspective:100px; -moz-perspective-origin:0% 50%; }
div#dime3a:hover { transform: rotateY(-50deg); -moz-transform: rotateY(-50deg); -webkit-transform: rotateY(-50deg); }
div#dime3b { perspective:70px; -moz-perspective:70px; -webkit-perspective:70px; }
div#dime4a:hover { transform: rotateX(50deg); -moz-transform: rotateX(50deg); -webkit-transform: rotateX(50deg); }
div#dime4b { perspective:100px; perspective-origin:0% 30%;
-moz-perspective:100px; -moz-perspective-origin:0% 30%;
-webkit-perspective:100px; -webkit-perspective-origin:0% 30%; }
Also see: Tab Triggers