.square {
    width: 144px;
    height: 144px;
    background: #f0f;
    margin-right: 48px;
    float: left;
}

.transformed {
    -webkit-transform: rotate(15deg) scale(1.25, 0.5);
    -moz-transform: rotate(15deg) scale(1.25, 0.5);
    -ms-transform: rotate(15deg) scale(1.25, 0.5);
    -o-transform: rotate(15deg) scale(1.25, 0.5);
    transform: rotate(15deg) scale(1.25, 0.5);
}

#tdiv6 {
    -webkit-transition: -webkit-transform 0.1s ease-in;
}

#tdiv6:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    -moz-box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.6);
    -ms-box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.6);
    -o-box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.6);
    box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.6);
}

#tdiv7 {
    -webkit-transition: -webkit-transform 0.5s ease-in;
}

#tdiv7:hover {
    -moz-transform: rotate(360deg) scale(2);
    -webkit-transform: rotate(360deg) scale(2);
    -ms-transform: rotate(360deg) scale(2);
    -o-transform: rotate(360deg) scale(2);
    transform: rotate(360deg) scale(2);
}