Ein paar Transformationen

by Jens Grochtdreis

HTML

<div class="rotateme"></div>
<div class="skewme"></div>
<div class="scaleme"></div>
<div class="translateme"></div>
<div class="all"></div>

CSS

div {
    width: 200px;
    height: 40px;
    background: #fd8700;
    border: 1px solid #000;
    margin-bottom: 40px;
}

.rotateme {
    -webkit-transform: rotate(-10deg);
       -moz-transform: rotate(-10deg);
            transform: rotate(-10deg);
}
.skewme {
    -webkit-transform: skew(-30deg);
       -moz-transform: skew(-30deg);
            transform: skew(-30deg);
}
.scaleme {
    -webkit-transform: scale(0.5,2.0);
       -moz-transform: scale(0.5,2.0);
            transform: scale(0.5,2.0);
}


.translateme {
    -webkit-transform: translate(50px, 0);
       -moz-transform: translate(50px, 0);
            transform: translate(50px, 0);
}

.all {
    -webkit-transform: rotate(-10deg) skew(-30deg) scale(0.5,2.0) translate(50px, 0);
       -moz-transform: rotate(-10deg) skew(-30deg) scale(0.5,2.0) translate(50px, 0);
            transform: rotate(-10deg) skew(-30deg) scale(0.5,2.0) translate(50px, 0);
    margin-top: 60px;
    background: #a20000;
}

body {padding: 40px;}