CSS3 トランスフォームまとめ書き

by tea4two

HTML

<div id="thumb">CSS3 transformation</div>

CSS

body {
    margin-top: 100px;
    border-top: 1px solid #ccc;
    background-color: #eee;
}
#thumb {
    padding: 10px;
    background-color: rgba(200,0,0,.8);
    color: white;
    
    -webkit-transform: translate(20px) rotate(30deg) scale(.5,.5);
    -moz-transform: translate(20px) rotate(30deg) scale(.5,.5);
    -ms-transform: translate(20px) rotate(30deg) scale(.5,.5);
    -o-transform: translate(20px) rotate(30deg) scale(.5,.5);
    transform: translate(50px,50px) rotate(0) scale(.5,.5);
}