.translate {
    width: 300px;
    height: 100px;
    background-color: blue;
    border: 1px solid blue;
    color: white;
    font-size: 1.5em;
    padding-left: 10px;
    margin-left: 20px;
}
.translate:hover {
    width: 300px;
    height: 100px;
    color: black;
    font-size: 1.5em;
    padding-left: 10px;
    margin-left: 20px;
    background-color: yellow;
    border: 1px solid black;
    /*500px a la derecha*/
    -ms-transform: translate(500px); /* IE 9 */
    -webkit-transform: translate(500px); /* Safari */
    transform: translate(500px); /* Standard syntax */
    }
/*-----*/
.rotate {
    width: 300px;
    height: 100px;
    background-color: blue;
    border: 1px solid blue;
    color: white;
    font-size: 1.5em;
    padding-left: 10px;
    margin-left: 20px;
}
.rotate:hover {
    width: 300px;
    height: 100px;
    color: black;
    font-size: 1.5em;
    padding-left: 10px;
    margin-left: 20px;
    background-color: yellow;
    border: 1px solid black;
    /*va a girar 200 grados en sentido del reloj. Si quisieramos en sentido contrario hay que poner -20deg*/
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg); /* Standard syntax */
    }
/*-----*/
.scale {
    width: 300px;
    height: 100px;
    background-color: blue;
    border: 1px solid blue;
    color: white;
    font-size: 1.5em;
    padding-left: 10px;
    margin-left: 20px;
}
.scale:hover {
    width: 300px;
    height: 100px;
    color: black;
    font-size: 1.5em;
    text-align: center;
    padding-left: 10px;
    margin-left: 20px;
    background-color: yellow;
    border: 1px solid black;
    /*aumenta 2 veces la anchura y 3 la altura */
    -ms-transform: scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* Standard syntax */
    }
/*-----*/
.skewX {
    width: 300px;
    height: 100px;
    background-color: blue;
    border: 1px solid blue;
    color: white;
    font-size: 1.5em;
    padding-left: 10px;
    margin-left: 20px;
}
.skewX:hover {
    width: 300px;
    height: 100px;
    color: black;
    font-size: 1.5em;
    padding-left: 10px;
    margin-left: 20px;
    background-color: yellow;
    border: 1px solid black;
    /*deforma 20deg hacia la izq. Si quisieramos hacia la derecha habria que poner -20deg*/
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
    }
/*-----*/
.skewY {
    width: 300px;
    height: 100px;
    background-color: blue;
    border: 1px solid blue;
    color: white;
    font-size: 1.5em;
    padding-left: 10px;
    margin-left: 20px;
}
.skewY:hover {
    width: 300px;
    height: 100px;
    color: black;
    font-size: 1.5em;
    padding-left: 10px;
    margin-left: 20px;
    background-color: yellow;
    border: 1px solid black;
    /*deforma 20deg hacia abajo. Si quisieramos hacia arriba habría que poner -20deg*/
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg);
    }
/*-----*/
.skew {
    width: 300px;
    height: 100px;
    background-color: blue;
    border: 1px solid blue;
    color: white;
    font-size: 1.5em;
    padding-left: 10px;
    margin-left: 20px;
}
.skew:hover {
    width: 300px;
    height: 100px;
    color: black;
    font-size: 1.5em;
    padding-left: 10px;
    margin-left: 20px;
    background-color: yellow;
    border: 1px solid black;
    /*combina las anteriores 20deg ejeX 10deg ejeY*/
    -ms-transform: skew(20deg, 10deg); /* IE 9 */
    -webkit-transform: skew(20deg, 10deg); /* Safari */
    transform: skew(20deg, 10deg);
    }
/*-----*/
.matrix {
    width: 300px;
    height: 100px;
    background-color: blue;
    border: 1px solid blue;
    color: white;
    font-size: 1.5em;
    padding-left: 10px;
    margin-left: 20px;
}
.matrix:hover {
    width: 300px;
    height: 100px;
    color: black;
    font-size: 1.5em;
    text-align: center;
    padding-left: 10px;
    margin-left: 20px;
    background-color: yellow;
    border: 1px solid black;
    /*combina todos los anteriores
        scale (), skewY (), skewX (), scale (), translateX (), translateY ()*/
    -ms-transform: matrix(2, -0.3, 0, 2, 10, 10); /* IE 9 */
    -webkit-transform: matrix(2, -0.3, 0, 2, 10, 10); /* Safari */
    transform: matrix(2, -0.3, 0, 2, 510, 10);
    }