Experimenting with CSS Transforms

by vintharas

HTML

<div class="coordinates"></div>
<div class="box move"></div>
<div class="box scale"></div>
<div class="box rotate"></div>
<div class="box skew"></div>
<div class="box move-and-rotate"></div>

CSS

.coordinates{
    position: absolute;
    left: 100px;
    top: 20px;
    border-left: 1px dotted black;
    border-top: 1px dotted black;
    height: 750px;
    width: 500px;
}

.box{
    margin: 20px 100px;
    background-color: red;
    width: 100px;
    height: 100px;
}

.move{
    transform: translate(10px, .5em);   
}

.scale{
    transform: scale(2, 0.5);
}

.rotate{
    transform: rotate(30deg);
}

.skew{
   transform: skew(15deg); 
}

.move-and-rotate{
    transform: translate(100px, 50px) rotate(50deg);
}