SEO no es magia, así que dejar de hacer trucos SEO

El siguiente post es una traducción libre de un artículo que me ha parecido bastante interesante: "SEO Isn't Magic - So Stop Doing SEO Tricks".

Las personas somos constantemente atraídas por los atajos, los trucos, y las técnicas para lograr resultados rápidamente y sin demasiado esfuerzo.

Tomemos como ejemplo las dietas de adelgazamiento. Es bien sabido que una alimentación saludable y actividad física regular ayudan a mantenerse en forma. Sin embargo siguen teniendo gran éxito las dietas denominadas "milagro", esas que prometen perder una gran cantidad de peso en un plazo muy corto de tiempo. Dietas imposibles, que son perjudiciales para la salud y cuya pérdida de peso es sólo momentánea.

El encanto de los trucos SEO

Lo mismo ocurre con el SEO. Aquellos que llevamos a cabo esta tarea de un modo laborioso, cuántas veces escuchamos demandas o preguntas relativas a posibles trucos para abalanzarse sobre el primer lugar en Google. Quien plantea estas preguntas generalmente no quiere una explicación o una capacitación sobre el tema, quiere consejos rápidos, una fórmula mágica o una receta que, sin esfuerzo, en lugar de bajar de peso le haga volar a la parte superior del SERP.

Los trucos en el SEO hace tiempo que existen y es posible que siempre los haya. Sin embargo, la mayoría de estos trucos, tienen las mismas contraindicaciones que las dietas milagro. En muchos casos provocan un efecto temporal y a menudo pueden acarrear más daños que beneficios. Incluso en el SEO vale la regla: poco esfuerzo, pocos resultados.

Los trucos SEO suelen tener un único objetivo: hacer que una página web aparezca en la parte superior de lista de resultados de búsqueda, aunque no merezca estar en esa posición. Los motores de búsqueda están constantemente buscando maneras evitar precisamente eso. Actualizaciones como Panda o Penguin (hablando de Google) pretenden prevenir y penalizar estos trucos.

Construir sólo sobre la base de trucos SEO lleva a un conflicto entre el webmaster y los buscadores. Una lucha con trucos por un lado y las actualizaciones de los algoritmos de los buscadores por otro.

Consejos SEO que nunca pasan de moda

Sin embargo, existen prácticas SEO que no pierden su eficacia, estas son algunas:

  • Encontrar los términos que usa la gente para buscar información en los buscadores y usarlos dentro de tu contenido. Obviamente, sin excederse ni repetirlos continuamente.
  • Asegurarse de que los bots de los motores de búsqueda puedan localizar fácilmente las páginas pertinentes de tu sitio web y puedan comprender claramente el contenido abarcado.
  • Corregir los errores y las cosas que no funcionan en tu sitio, eliminar el contenido duplicado y asegurarse de que la página se carga rápidamente.
  • Crear contenido interesante, actualizarlo con frecuencia y presentarlo de una manera que incite a los usuarios a compartirlo.
  • Establecer relaciones con otros sitios relevantes que tratan temas similares al tuyo, por los que puedas obtener enlaces.
  • Asegurarse de que los usuarios tienen una buena experiencia de navegación dentro del sitio.

Los años quizá hayan cambiado la forma de hacer estas cosas, pero no su esencia.

La diferencia entre una estrategia SEO "miope" y a corto plazo, y definir una estrategia a largo plazo, es precisamente su diferencia de enfoque: la diferencia entre centrarse en trucos e invertir en la creación de valor. En el primer caso estás constantemente obligado a perseguir la última tendencia SEO y tiemblas cada vez que Google anuncia una actualización de los algoritmos. En el segundo caso trabajas duro pero con mayor tranquilidad.

El enfoque miope y propenso a trucos también supone el peligro de considerar Google como única fuente de accesos a tu sitio Web y descuidar otros aspectos como la construcción de una marca y la creación de valor. Si debido a un truco mágico puedes alcanzar la primera posición en Google pero no lo puedes aprovechar, como la fidelización de los lectores o mediante la adquisición de nuevos clientes, está claro que siempre estarás a merced de Google y que cada cada cambio de algoritmo supondrá un riesgo muy alto para tu sitio.

Generar prefijos CSS3 con PHP

Los navegadores actuales soportan las propiedades CSS3 con prefijos específicos para cada tipo de navegador, hasta que la propiedad sea aprobada y finalizada por el W3C. Eso significa mucha repetición a la hora de escribir código. Pongamos como ejemplo la siguiente declaración:

#caja{
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
        -ms-border-radius: 5px;
	border-radius: 5px;
}

Más código significa mayores probabilidades de cometer errores y produce hojas de estilos que son más largas y más difícil de mantener. En lugar de escribir el prefijo específico del tipo de navegador y los valores una y otra vez, podemos utilizar PHP para generarlo por nosotros.

Podemos utilizar una función PHP para producir el código CSS3. La función tendrá que saber dos cosas: el nombre de base de la propiedad (por ejemplo, border-radius) y el valor asociado a ella ("5px"). Por lo tanto, deberíamos escribir:

<?php
header('Content-type: text/css');

function css3_write ($property, $value) {
	$css3 = "-webkit-".$property.": ".$value.";\n"
	." -moz-".$property.": ".$value.";\n"
	." -o-".$property.": ".$value.";\n"
	." -ms-".$property.": ".$value.";\n"
	." ".$property.": ".$value.";\n";
	echo $css3;
} ?>

La primera línea es para indicar el tipo de contenido del archivo php. Obviamente a la hora de invocar nuestra hoja de estilos lo haremos llamando el archivo php:

<link rel='stylesheet' type='text/css' href='css/estilos.php' />

En la función css3_write queremos producir la correspondiente declaración de CSS para todos los navegadores. La propiedad base se incluye al final, como fallback. Construiremos la declaración utilizando una serie de concatenaciones y utilizando \n (nueva línea) para hacer que la función escriba un CSS más legible.

Para producir nuestro CSS3 tan sólo tenemos que llamar a la función con la propiedad CSS3 y el valor para dicha propiedad. Por ejemplo:

#caja {
	border: 1px solid black;
	background: #fff;
    <?php css3_write("border-radius", "5px"); ?>
	width: 50%;
    <?php css3_write("box-shadow", "5px 5px 2px rgba(0, 0, 0, 0.5)"); ?>
}

Lo que generará el siguiente código:

#caja {
	border: 1px solid black;
	background: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px; width: 50%;
	width: 50%;
	-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
	-ms-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
}

Este método es una alternativa al uso de compiladores como Less o Sass. Para obtener más información acerca de cómo crear CSS con PHP podéis consultar: Controlar CSS con PHP y Comprimir varios CSS en uno con PHP.

Insertar Contadores generados con CSS

En el artículo "How To Benefit From CSS Generated Content And Counters" de Smashing Magazine nos ofrecen un interesante tutorial acerca de como agregar contenido con CSS. El tutorial abarca desde la adición de cadenas de texto o imágenes hasta la adición de contadores. En este post se realiza una traducción libre de esta parte de dicho tutorial.

Se puede insertar contenido generado desde una hoja de estilo, antes y después el contenido de un elemento, utilizando los pseudo-elementos :before y :after, respectivamente. Para representar los pseudo-elementos podemos utilizar el siguiente ejemplo:

<p>
   <before>Inicio</before>
	Contenido
   <after>Final</after>
</p>

Y el CSS sería

p:before {
   content: "Inicio";
}
p:after {
   content: "Final";
}

Ten en cuenta que si estás validando el archivo CSS contra las especificaciones CSS3, los pseudo-elementos :before y :after deberían escribirse como ::before y ::after. De lo contrario, el validador CSS dará un error.

Insertar contadores

La numeración automática de CSS es controlada por dos propiedades, counter-reset y counter-increment. Los contadores definidos por estas propiedades se utilizan con las funciones counter() y counters() de la propiedad content. La propiedad counter-reset puede contener uno o más nombres de contadores, opcionalmente seguidos por un número entero. El entero establece el valor que se incrementa por la propiedad counter-increment para cualquier coincidencia con el elemento dado. El valor predeterminado es 0. Se admiten valores negativos. La propiedad counter-increment es similar. La diferencia fundamental es que ésta incrementa un contador. El incremento de su valor por defecto es 1. También se admiten valores negativos.

Vamos a ver ahora un ejemplo:

<dl>
   <dt>elemento</dt>
   <dd>descripción</dd>
   <dt>elemento</dt>
   <dd>descripción</dd>
   <dt>elemento</dt>
   <dd>descripción</dd>
</dl>

Queremos agregar numeración progresiva (1, 2, 3, etc.) para cada definición (dt) de la lista. El CSS:

dl {
   counter-reset: item;
}
dt:before {
   counter-increment: item;
   content: counter(item);
}

Ver ejemplo en funcionamiento » »

La primera regla establece un contador para la lista de definiciones. A esto se le denomina "scope" o "alcance". El nombre (o identificador) del contador es item. Cualquier nombre que elijamos para nuestro contador debe ser idéntico al de la propiedad counter-increment.

En la segunda regla, asociamos el pseudo-elemento :before al elemento dt, ya que queremos insertar el contador precisamente antes del contenido del elemento. La función counter() acepta nuestro identificador item como argumento, y la propiedad content genera el contador.

No hay ningún espacio entre el número y el contenido del elemento. Si queremos añadir, por ejemplo, un punto y un espacio después del número, podríamos insertar la siguiente cadena en la propiedad content:

dt:before {
   content: counter(item) ". ";
}

Ver ejemplo en funcionamiento » »

Podemos agregar más estilos a los contadores aplicando otras propiedades al pseudo-elemento. Por ejemplo:

dt:before {
   padding: 1px 2px;
   margin-right: 0.2em;
   background: #ffc;
   color: #000;
   border: 1px solid #999;
   font-weight: bold;
   content: counter(item);
   counter-increment: item;
}

Ver ejemplo en funcionamiento » »

Además, los contadores pueden ser negativos. Por ejemplo, si necesitamos numeración progresiva a partir de 0, podríamos escribir lo siguiente:

dl {
   counter-reset: item -1;
}
dt:before {
   counter-increment: item;
   content: counter(item) ". ";
}

Ver ejemplo en funcionamiento » »

Al establecer la propiedad counter-reset en -1 e incrementándola en 1, el valor resultante es 0, y la numeración comenzará a partir de ese valor. Los contadores negativos pueden combinarse con contadores positivos para lograr efectos interesantes. Por ejemplo:

dl {
   counter-reset: item -1;
}
dt:before {
   counter-increment: item 3;
   content: counter(item) ". ";
}

Ver ejemplo en funcionamiento » »

Como veis, sumar y restar números positivos y negativos produce una amplia gama de combinaciones entre contadores. Con sólo unos simples cálculos, obtenemos un completo control sobre la numeración automática.

Otra característica interesante de los contadores CSS radica en su capacidad para anidar. De hecho, la numeración también se puede ordenar por subniveles progresivos, como 1.1, 1.1.1, 2.1 y así sucesivamente. Para agregar un subnivel a los elementos en la lista, deberías escribir lo siguiente:

HTML:

<ol>
    <li>elemento</li>
    <li>elemento
        <ol>
            <li>elemento</li>
            <li>elemento</li>
            <li>elemento
                <ol>
                    <li>elemento</li>
                    <li>elemento</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

CSS:

ol {
   counter-reset: item;
   list-style: none;
}
li {
   display: block;
}
li:before {
   counter-increment: item;
   content: counters(item, ".") " ";
}

Ver ejemplo en funcionamiento » »

En este ejemplo, tenemos sólo el contador item para cada nivel de anidamiento. En lugar de escribir tres contadores diferentes (como item1, item2, item3) y creando tres alcances o "scopes" diferentes para cada elemento ol anidado, contamos con la función counters() para lograr este objetivo. La segunda regla es importante y merece una explicación. Las listas ordenadas tienen marcadores por defecto (es decir, números), por lo que nos deshacemos de estos marcadores convirtiendo los elementos de lista en bloques. Recuerda que sólo elementos con display: list-items tienen marcadores.

La tercera regla es la que hace el trabajo. La primera declaración incrementa el contador establecido previamente en la lista. Luego, en la segunda declaración, la función counters() crea todas las instancias del contador para las listas internas. La estructura de esta función es el siguiente:

  • Su primer argumento es el nombre del contador dado, seguido inmediatamente por una coma.
  • Su segundo argumento es un período entre comillas dobles.

Fíjate que hemos introducido un espacio después de la función counters() para separar los números del contenido real de los elementos de lista.

Los contadores están formateados, por defecto, como números decimales. Sin embargo, los estilos de la propiedad list-style-type también están disponibles para los contadores. La notación por defecto es counter(nombre) (es decir, sin estilo) o counter(nombre, 'list-style-type') para cambiar el formato por defecto. En la práctica, los estilos recomendados son los siguientes:

  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • lower-alpha
  • upper-alpha

Veamos un ejemplo:

HTML:

<dl>
	<dt>elemento</dt>
	<dd>descripción</dd>
	<dt>elemento</dt>
	<dd>descripción</dd>
	<dt>elemento</dt>
	<dd>descripción</dd>
</dl>

CSS:

dl {
   counter-reset: item desc;
}
dt:before {
   counter-increment: item;
   content: counter(item, upper-latin) ". ";
}
dd:before {
   counter-increment: desc;
   content: counter(desc, lower-latin) ". ";
}

Ver ejemplo en funcionamiento » »

No te olvides que estamos trabajando con sistemas numéricos. Recuerda también que la especificación no define cómo producir un sistema alfabético más allá del final de un alfabeto. Por lo que los números se recomiendan para largas listas.

También podemos añadir estilos a la función counters()

HTML:

<ol>
    <li>elemento</li>
    <li>elemento
        <ol>
            <li>elemento</li>
            <li>elemento</li>
            <li>elemento
                <ol>
                    <li>elemento</li>
                    <li>elemento</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

CSS:

ol {
    counter-reset: item;
    list-style: none;    
}

li:before {
	counter-increment: item;
	content: counters(item, ".", lower-roman) " ";
}

li:before { counter-increment: item; content: counters(item, ".", lower-roman) " "; }

Ver ejemplo en funcionamiento » »

Fíjate que la función counters() acepta también un tercer argumento (lower-roman) como el último elemento en la lista de argumentos, separado de los anteriores por una segunda coma. Sin embargo, la función counters() no nos permite especificar diferentes estilos para cada nivel de anidamiento.

Audio con HTML5

El nuevo elemento audio nos permite incrustar audio en una página web sin la necesidad de utilizar plugins adicionales como el Flash. Ya no es necesario depender de plugins de terceros, la reproducción de audio está soportada de forma nativa en los navegadores modernos, incluyendo los navegadores de muchos dispositivos móviles.

Un ejemplo básico de inserción de audio en nuestra página web podría ser el siguiente.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Audio</title>
</head>
<body>
<audio src="musica.mp3"></audio>
</body>
</html>

En el ejemplo, se ha añadido el atributo "controls", de lo contrario no se mostraría nada en la página al usuario. El código es muy sencillo pero todavía existen algunos problemas con el elemento audio. El tipo de fichero utilizado ha de ser soportado de forma nativa por el navegador. En la siguiente tabla puedes ver un pequeño resumen:

Navegador MP3 Wav Ogg
Internet Explorer 9+ SI NO NO
Chrome 6+ SI SI SI
Firefox 3.6+ NO SI SI
Safari 5+ SI SI NO
Opera 10+ NO SI SI

Hay otros codecs de audio pero yo me centraría principalmente en Ogg Vorbis (.ogg) y MP3 (.mp3). También se puede considerar el WAV (.wav), pero su tamaño no lo hace muy apropiado para la reproducción en la web.

Si deseas lograr una reproducción de audio soportada en todos los navegadores modernos. Puedes utilizar el elemento de "source" para indicar los diferentes archivos de audio, y el navegador escogerá uno que pueda reproducir.

<audio controls>
<source src="musica.mp3" type="audio/mpeg" />
<source src="musica.ogg" type="audio/ogg" />
</audio>

El elemento audio no necesita atributos de altura o anchura porque, por defecto, cada navegador tiene su propio reproductor. Aún así puedes definir la altura y la anchura mediante CSS.

Se puede escribir código adicional para aquellos navegadores que no puedan reproducir audio de forma nativa. Por ejemplo Internet Explorer 6,7 y 8. En el artículo "Getting HTML5 Audio tag and flash fallback to work nicely with all browsers" ofrecen una solución que parece funcionar con todos los navegadores. El siguiente ejemplo utiliza el Standalone Flash WPAudioPlayer para realizar el fallback.

<audio id="audioplayer" controls>
<source src="musica.mp3" type="audio/mpeg" />
<source src="musica.ogg" type="audio/ogg" />
</audio>
<script type="text/javascript">
var audioTag = document.createElement('audio');

if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")) && ("no" != audioTag.canPlayType("audio/ogg")) && ("" != audioTag.canPlayType("audio/ogg"))))
{
	AudioPlayer.embed("audioplayer", {soundFile: "musica.mp3"});
}
</script>

En primer lugar, se coloca el elemento audio en la página con el id="audioplayer". A continuación, se ejecuta javascript para comprobar algunas cosas y si alguno de ellas falla, sustituye el elemento por el Flash Player.

El atributo preload

Si tienes un archivo grande o estás seguro que el usuario va a querer escuchar el audio que se ha incrustado, puede hacer que el navegador comience a descargar el archivo al cargar la página. El atributo preload tiene tres valores posibles:

preload="auto"

auto, o simplemente escribiendo preload, se le indica al navegador que descargue el fichero de audio cuando la página cargue.

preload="none"

Indica al navegador que no descargue el audio. Sólo cuando el usuario inicialice la reproducción éste comenzará a descargarlo.

preload="metadata"

Se recibe la información (metadata) acerca de la pista de audio, incluyendo la duración. La descarga no se iniciará hasta que el usuario comience la reproducción.

El atributo loop

Si se indica este atributo, cuando el fichero de audio termine de reproducirse, este comenzará desde el principio otra vez. El atributo loop es un atributo booleano y puede ser establecido de las siguientes formas:

<audio loop>
<audio loop="loop">
<audio loop="">

El atributo autoplay

Otro atributo booleano, en este caso fuerza al navegador a comenzar a descargar y ejecutar el audio en cuanto la página carga.

El atributo controls

El atributo de controls agrega los controles específicos del navegador al archivo de audio, que incluyen botón de Play/Pause, información acerca de la duración/tiempo-escuchado, controles de volumen,...

<audio controls>
...
</audio>

Es un atributo booleano y se puede añadir de las siguientes formas:

<audio controls>
<audio controls="controls">
<audio controls="">

CSS3 Transforms

Las transformaciones en CSS3 ofrecen la posibilidad de añadir persepectiva a tus elementos HTML. Podemos usar las transformaciones CSS3 para disponer los elementos en un espacio 2D o 3D. HTML es generalmente una presentación lineal, todos los elementos son esencialmente rectángulos. Las transformaciones nos permiten aprovechar los diferentes planos para dar a nuestro "layout" cierta perspectiva. Hay dos tipos de transformaciones: 2D y 3D. Vamos a ver primero las transformaciones 2D:

  • Skew: Define un sesgo 2D a lo largo de los ejes x e y.
  • Scale: Proporciona un escalado 2D sobre los ejes x e y.
  • Rotate: Proporciona una rotación 2D a un número de grados definido.
  • Translate: Se traslada (o desplaza) el elemento a una posición definida 2D.

Vamos a ver un ejemplo:

CSS:

.caja{
	display:block;
	margin-bottom:20px;
	width:100px;
	height:60px;
	background:#ddd;
	border:2px solid #c8c8c8;
}
.caja_skew {
	transform: skew(30deg);
	-ms-transform: skew(30deg); /* IE 9 */
	-webkit-transform: skew(30deg); /* Safari y Chrome */
	-o-transform: skew(30deg); /* Opera */
	-moz-transform: skew(30deg); /* Firefox */
}
.caja_scale {
	transform: scale(1,0.5);
	-ms-transform: scale(1,0.5); /* IE 9 */
	-webkit-transform: scale(1,0.5); /* Safari y Chrome */
	-o-transform: scale(1,0.5); /* Opera */
	-moz-transform: scale(1,0.5); /* Firefox */
}
.caja_rotate {
	transform: rotate(15deg);
	-ms-transform: rotate(15deg); /* IE 9 */
	-webkit-transform: rotate(15deg); /* Safari y Chrome */
	-o-transform: rotate(15deg); /* Opera */
	-moz-transform: rotate(15deg); /* Firefox */
}
.caja_translate {
	transform: translate(125px, 15px);
	-ms-transform: translate(125px, 15px); /* IE 9 */
	-webkit-transform: translate(125px, 15px); /* Safari y Chrome */
	-o-transform: translate(125px, 25px); /* Opera */
	-moz-transform: translate(125px, 15px); /* Firefox */
}
.caja_rotate_skew_scale_translate {
	transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px);
	-ms-transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px); /* IE 9 */
	-webkit-transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px); /* Safari y Chrome */
	-o-transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px); /* Opera */
	-moz-transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px); /* Firefox */
}

HTML:

<p>sesgar:</p>
	<div class="caja caja_skew"></div>
<p>escalar:</p>
	<div class="caja caja_scale"></div>
<p>rotar:</p>
	<div class="caja caja_rotate"></div>
<p>trasladar:</p>
	<div class="caja caja_translate"></div>
<p>rotar, sesgar, escalar y trasladar:</p>
	<div class="caja caja_rotate_skew_scale_translate"></div>

Ver ejemplo en funcionamiento » »

CSS3 transformaciones en 3D

Las transformaciones en 3D se implementan de manera similar a las transformaciones 2D, pero también tienes acceso a un tercer plano. A continuación vemos las opciones disponibles para las transformaciones 3D.

  • translate3d: Traslada (o desplaza) el elemento a una posición 3D definida en los ejes x,y,z.
  • scale3d: especifica una operación de escala 3D en los ejes x,y,z.
  • rotateX: especifica una rotación hacia la derecha por el ángulo dado alrededor del eje x.
  • rotateY: especifica una rotación hacia la derecha por el ángulo dado alrededor del eje y.
  • rotateZ: especifica una rotación hacia la derecha por el ángulo dado alrededor el eje z.

Vamos a ver otro ejemplo.

CSS:

.caja{
	display:block;
	margin-bottom:20px;
	width:100px;
	height:60px;
	background:#ddd;
	border:2px solid #c8c8c8;
}
.caja_translate3d {
	transform: translate3d(75%, ?25%, 0);
	-ms-transform: translate3d(75%, ?25%, 0); /* IE 9 */
	-webkit-transform: translate3d(75%, ?25%, 0); /* Safari y Chrome */
	-o-transform: translate3d(75%, ?25%, 0); /* Opera */
	-moz-transform: translate3d(75%, ?25%, 0); /* Firefox */
}
.caja_scale3d {
	transform: scale3d(0.5, 1.25,1);
	-ms-transform: scale3d(0.5, 1.25,1); /* IE 9 */
	-webkit-transform: scale3d(0.5, 1.25,1); /* Safari y Chrome */
	-o-transform: scale3d(0.5, 1.25,1); /* Opera */
	-moz-transform: scale3d(0.5, 1.25,1); /* Firefox */
}
.caja_rotate_x {
	transform: rotateX(100deg);
	-ms-transform: rotateX(100deg); /* IE 9 */
	-webkit-transform: rotateX(100deg); /* Safari y Chrome */
	-o-transform: rotateX(100deg); /* Opera */
	-moz-transform: rotateX(100deg); /* Firefox */
}
.caja_rotate_y {
	transform: rotateY(10deg);
	-ms-transform: rotateY(10deg); /* IE 9 */
	-webkit-transform: rotateY(10deg); /* Safari y Chrome */
	-o-transform: rotateY(10deg); /* Opera */
	-moz-transform: rotateY(10deg); /* Firefox */
}
.caja_rotate_z {
	transform: rotateZ(40deg);
	-ms-transform: rotateZ(40deg); /* IE 9 */
	-webkit-transform: rotateZ(40deg); /* Safari y Chrome */
	-o-transform: rotateZ(40deg); /* Opera */
	-moz-transform: rotateZ(40deg); /* Firefox */
}

HTML:

<p>trasladar 3d:</p>
    <div class="caja caja_translate3d"></div>
<p>escalar 3d:</p>
    <div class="caja caja_scale3d"></div>
<p>rotar x:</p>
    <div class="caja caja_rotate_y"></div>
<p>rotar y:</p>
    <div class="caja caja_rotate_z"></div>
<p>rotar z:</p>
    <div class="caja caja_rotate_x"></div>

Ver ejemplo en funcionamiento » »

Para ver mejor el efecto de las transformaciones vamos a realizar unas simples animaciones.

CSS:

.caja{
	display:block;
	margin-bottom:20px;
	width:100px;
	height:60px;
	background:#ddd;
	border:2px solid #c8c8c8;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.caja_translate3d:hover {
	transform: translate3d(75%, -25%, 0);
	-ms-transform: translate3d(75%, -25%, 0); /* IE 9 */
	-webkit-transform: translate3d(75%, -25%, 0); /* Safari y Chrome */
	-o-transform: translate3d(75%, -25%, 0); /* Opera */
	-moz-transform: translate3d(75%, -25%, 0); /* Firefox */
}
.caja_scale3d:hover {
	transform: scale3d(0.5, 1.25,1);
	-ms-transform: scale3d(0.5, 1.25,1); /* IE 9 */
	-webkit-transform: scale3d(0.5, 1.25,1); /* Safari y Chrome */
	-o-transform: scale3d(0.5, 1.25,1); /* Opera */
	-moz-transform: scale3d(0.5, 1.25,1); /* Firefox */
}
.caja_rotate_x:hover{
	transform: rotateX(100deg);
	-ms-transform: rotateX(100deg); /* IE 9 */
	-webkit-transform: rotateX(100deg); /* Safari y Chrome */
	-o-transform: rotateX(100deg); /* Opera */
	-moz-transform: rotateX(100deg); /* Firefox */
}
.caja_rotate_y:hover{
	transform: rotateY(10deg);
	-ms-transform: rotateY(10deg); /* IE 9 */
	-webkit-transform: rotateY(10deg); /* Safari y Chrome */
	-o-transform: rotateY(10deg); /* Opera */
	-moz-transform: rotateY(10deg); /* Firefox */
}
.caja_rotate_z:hover{
	transform: rotateZ(40deg);
	-ms-transform: rotateZ(40deg); /* IE 9 */
	-webkit-transform: rotateZ(40deg); /* Safari y Chrome */
	-o-transform: rotateZ(40deg); /* Opera */
	-moz-transform: rotateZ(40deg); /* Firefox */
}

HTML:

<p>trasladar 3d:</p>
    <div class="caja caja_translate3d"></div>
<p>escalar 3d:</p>
    <div class="caja caja_scale3d"></div>
<p>rotar x:</p>
    <div class="caja caja_rotate_y"></div>
<p>rotar y:</p>
    <div class="caja caja_rotate_z"></div>
<p>rotar z:</p>
    <div class="caja caja_rotate_x"></div>

Ver ejemplo en funcionamiento » »