Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Spread your code soluces to the world

Love me
Solucior » CSS » Rotate and scale with CSS

Rotate and scale with CSS

06/17/2011 by Dux   -   4.3/5 (32 ratings)

Here are two examples of rotation and scale (zoom) with CSS3.
The first example uses javascript to apply transition effects by changing the CSS class of an element. This allows the event to be deported to another area.
The second example works with the simplest pseudo-class HOVER.

The effects do not work with Firefox for now only on "inline" elements. Therefore instead of using a DIV in the second example, I turned an a href into a block using property display: block.
For Opera, this code is only compatible with the latest version.

Demo.

Click here to rotate and scale


Drop your mouse pointer on this DIV to test.

source code



 
<style type="text/css">

/* Example 1 */
.rotation {
   
height: 200px;
}
.
rotation1 {
   
height: 200px;
   -
webkit-transition: 1.5s all ease-in-out;
   -
moz-transition: 1.5s all ease-in-out;
   -
o-transition: 1.5s all ease-in-out;
   
transition: 1.5s all ease-in-out;
}
.
rotation2 {
   
height: 200px;
       
   -
webkit-transition: 1.5s all ease-in-out;
   -
moz-transition: 1.5s all ease-in-out;
   -
o-transition: 1.5s all ease-in-out;
   
transition: 1.5s all ease-in-out;
       
   -
webkit-transform: rotate(360deg) scale(-1, -1);
   -
moz-transform: rotate(360deg) scale(-1, -1);
   -
o-transform: rotate(360deg) scale(-1, -1);
   
transform: rotate(360deg) scale(-1, -1);
}

/* Example 2 */
.ex_zoom {
       
position: relative; width: 140px; margin: auto; padding: 10px; background: cyan; display: block;
       
color: black; text-decoration: none;
       
   -
webkit-transition: .5s all ease-in-out;
   -
moz-transition: .5s all ease-in-out;
   -
o-transition: .5s all ease-in-out;
   
transition: .5s all ease-in-out;
}
.
ex_zoom:hover {
   -
webkit-transform: rotate(355deg) scale(2);
   -
moz-transform: rotate(355deg) scale(2);
   -
o-transform: rotate(355deg) scale(2);
   
transform: rotate(355deg) scale(2);
       
   
box-shadow: 2px 2px 5px #000;
   
-webkit-box-shadow: 2px 2px 5px #000;
}

</
style>

<
div style="text-align:center">
<
a href="javascript:void(0)" onclick="document.getElementById('imgeffect').className = (document.getElementById('imgeffect').className == 'rotation2') ? 'rotation1' : 'rotation2';">Click here to rotate and scale</a>
<
br />
<
img src="example/Lady_Gaga.jpeg" id="imgeffect" class="rotation" />
<
br /><br />
<
a href="javascript:void(0)" class="ex_zoom">
Drop your mouse pointer on this DIV to test.<br />
<
img src="example/Lady_Gaga.jpeg" style="width: 100px" />
</
a>

</
div>

Tested with Safari  Google Chrome  Firefox4  Opera  
Rate this code     |     Copied : 740x

Comments for Rotate and scale with CSS

max     12/07/2012 19:36
Very good
baloo     02/26/2012 12:21
hélas IE, l'usine à gaz du net, ne veut pas de ces effets. Comment faire???
balan     12/22/2011 14:19
Good one
Add a comment Nickname
ZOOM


Infinite zoom CSS3 and Javascript
Rotate and scale with CSS
Centering an element in the page
Very simple drag and drop upload form
MySQL table statistics
Javascript opacity
Simple function for PHP syntax highlighting
Zoom with CSS3
Div following the scrolling of the page
Dynamically add rows to a form. Complete solution