CSS3 transform

by kazumasa sait

HTML

<div class="translateY">
<img src="http://lorempixel.com/200/200/city/2">
</div>
<p>もじもじもじもじ</p>
    
<input type="submit" class="scale" value="送信する">
<br>
    
<div class="rotate">
<img src="http://placekitten.com/200/200">
</div>
    
<div class="skew">
もじもじもじもじ
</div>

CSS

.translateY:active {
    -webkit-transform: translate(100px, 200px);
    transform: translate(100px, 200px);
}

.scale:hover {
    -webkit-transform: scale(1.5, 2);
    transform: scale(1.5, 2);
}
.rotate {
    width: 200px;
}
.rotate:hover {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
.skew {
    width: 200px;
    height: 100px;
    background-color: yellowgreen;
    padding: 10px;
    text-align: center;
}
.skew:hover {
    -webkit-transform: skew(25deg, 10deg);
    transform: skew(25deg, 10deg);
}