Rotar elementos con CSS3

6 may 2010 2 comentarios

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:

.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:

<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.

Este post ha sido archivado en CSS, CSS3 y con los tags , , .

2 Comentarios

Daniel G. Blázquez, el 14/05/2010 a las 10:29:47

Parece que “rotateZ” no funciona en Opera. Hay que utilizar “rotate”

Daniel G. Blázquez, el 14/05/2010 a las 10:32:26

En firefox también es -moz-transform:rotate(-20deg)

:-)

Escribe un comentario

Comenta este post en Facebook