【CSS3】transitions & transfroms

transform: origin について

by tea4two

HTML

<p>transform: rotate(20deg)<br>
transform-origin: bottom right</p>
<div class="rotate"><img src="http://placekitten.com/g/200/200"></div>

CSS

body { 
	text-align: center;
}
.rotate {
    width: 200px;
	margin: 20px auto;
}
.rotate:hover {
	-webkit-transform-origin:bottom left;
    -moz-transform-origin:bottom left;
	-webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
}