CSS3 - 2DTransform & Transitions w3c
intro | transitions | scale | rotate | translate | skew | origin | examples | browser support
Transform - Scale
I am using the hover to generate the transform.
In addition to the transform I used transitions to ease the animation and for other property changes. Without the addtion of the transitions the image would just make an abrupt jump from one size to the other. The transform enlarges the image by x3 and the duration is for 1 second:
transform:scale(3);
transition-property: margin-left;
transition-timing-function: ease-out;
transition-duration: 1s;
Alert
Mobile devices do not responed to the hover therefore you need to click on the image/s in order to see the effect. Even though by clicking on the image you can generate the transform it still does not work correctly on touch devices. Because there is no hover the reverse transform cannot happen when the user rolls off but it is generated when the user click on another transform.
Scale - Styles
Below are the styles for each image in the left column.
The first set of styles will allow animation when the user rolls out:
.scale{
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
These are the main set of styles that will trigger the scale transform on the hover
.scale:hover{
-moz-transition-property: margin-left;
-moz-transform: scale(3);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 1s;
-webkit-transition-property: margin-left;
-webkit-transform:scale(3);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 1s;
-ms-transition-property: margin-left;
-ms-transform:scale(3);
-ms-transition-timing-function: ease-out;
-ms-transition-duration: 1s;
-o-transition-property: margin-left;
-o-transform:scale(3);
-o-transition-timing-function: ease-out;
-o-transition-duration: 1s;
transition-property: margin-left;
transform:scale(3);
transition-timing-function: ease-out;
transition-duration: 1s;
margin-left: 10%;
}