Para rotar un elemento (texto, imágen, div, etc…) un determinado número de grados con CSS3, utilizamos la propiedad transform que contiene varios posibles parámetros (none, matrix, matrix3d, translate3d, translateX, translateY, translateZ, scale, scale3d, scaleX, scaleY, scaleZ, rotate, rotate3d, rotateX, rotateY, rotateZ, skew, skewX, skewY, perspective) del que seleccionamos rotateZ.
Con el parámetro rotateZ() podemos girar a derecha o izquierda el elemento según el ángulo equivalente al número de DEG (Degrees = grados sexagesimales) que insertemos.
EJEMPLO
BUFA
Código CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .caja { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -125px; width: 250px; height: 100px; background: #326895; border: 1px solid #275274; color: #BFD7EA; } .caja h2 { margin-top: 38px; font-family: Arial, Helvetica, sans-serif; text-align: center; font-size: 20px; text-transform: uppercase; } .css3{ -webkit-transform: rotateZ(-20deg); -moz-transform: rotateZ(-20deg); -o-transform: rotateZ(-20deg); } |
Código HMTL:
1 2 3 | <div class="caja css3"> <h2>BUFA</h2> </div> |
Recordar que aún la mayoria de navegadores no aceptan esta propiedad de css. Para visualizarla actualmente podeis usar Chrome, Safari), sino disponemos de estos navegadores este efecto lo podríamos realizar, pero usando javascript.
Parece que “rotateZ” no funciona en Opera. Hay que utilizar “rotate”