<html>
<head>
</head>
<body>
<a href="http://cacodaemon.de/index.php?id=33"><h1>CSS 3 transform scale with origin Test</h1></a>
<hr />
<h1>default origin</h1>
<div class="blue"> </div>
<div class="green fifty"> </div>
<div class="red hundred"> </div>
<hr />
<h1>reset origin</h1>
<div class="blue reset-origin"> </div>
<div class="green fifty reset-origin"> </div>
<div class="red hundred reset-origin"> </div>
</body>
</html>
div {
width: 100px;
height: 100px;
margin: 50px;
float: left;
}
hr, h1 {
float: left; width: 100%
}
.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }
.fifty {
transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5);
-webkit-transform: scale(1.5, 1.5);
-o-transform: scale(1.5, 1.5);
-moz-transform: scale(1.5, 1.5);
}
.hundred {
transform: scale(2, 2);
-ms-transform: scale(2, 2);
-webkit-transform: scale(2, 2);
-o-transform: scale(2, 2);
-moz-transform: scale(2, 2);
}
.reset-origin {
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
}