New CSS 3 in 3D

Bonjour à tous,

Aujourd'hui nous allons nous intéresser à une nouvelle feature intégrée dans CSS 3. Il s'agit des transformations 3D qui ont été intégrées dans le moteur Web WebKit.

Cette nouvelle feature permet de simuler de la 3D ( ce n'est pas de la vrai 3D comme WebGL ) pour des rendus vraiment sympas.

Hakim El Hattab a réalisé une démonstration de cette feature destinée aux appareils mobiles. J'ai modifié cette démonstration pour qu'elle prenne en charge les navigateurs PC basés sur WebKit tels que Safari ou Google Chrome.

Alors comment cela fonctionne-t-il me demanderait vous ? Et bien c'est assez simple, dans un premier temps on réalise un cube à l'aide de la propriété CSS -webkit-transform de cette manière :

#back {
	width: 600px;
	height: 500px;
	background: rgba(0,100,120,1);
	text-align: center;
	-webkit-transform: translateZ(-49px); // on place le fond à -49
}

#front {
	width: 600px;
	height: 500px;
	background: url('../stripe.png') no-repeat bottom;
	-webkit-transform: translateZ(50px); // on place le premier plan à 50
}

#wall-left {
	height: 500px;
	width: 100px;
	left: 0px;

	background: #bbb;
        // le mur gauche est placé sur l'axe X puis tourné sur l'axe Y de 90 degrés
        -webkit-transform: translateX(-50px) rotate3d(0, 50, 0, 90deg);
}

#wall-right {
	height: 500px;
	width: 100px;
	right: 0px;
	background: #bbb;
        // on fait de même pour le mur droit en inversant l'angle de rotation
        -webkit-transform: translateX(50px) rotate3d(0, 50, 0, -90deg);
}

#wall-top {
	height: 100px;
	width: 600px;
	top: 0px;
	background: #999;
	-webkit-transform: translateY(-50px) rotate3d(50, 0, 0, 90deg);
}

#wall-bottom {
	height: 100px;
	width: 600px;
	bottom: 0px;
	background: #999;
	-webkit-transform: translateY(50px) rotate3d(50, 0, 0, -90deg);
}

La propriété -webkit-transform permet de spécifier un ensemble de transformations sur les couleurs, la rotation, la taille mais aussi le placement de l'élément. Une fois que l'on a notre belle boîte en CSS 3, il faut faire en sorte que cette boîte se déforme par rapport aux mouvements de la souris.

Pour cela nous utilisons la propriété -webkit-perspective-origin qui nous permet de définir l'origine de l'effet de perspective définit par -webkit-perspective. Cette propriété nous permet de définir la profondeur de champs et le point de vu pour un effet de perspective. Celui-ci est calculé automatiquement par le moteur WebKit pour nous :D.

Nous calculons donc les coordonnées de l'origine du point de vu de la perspective et appliquons les modifications de coordonnées à l'aide d'une boucle de cette façon :

function onMouseMove( event ) {
	perspective.tx = Math.round( ( event.clientX / window.innerWidth ) * 100 );
	perspective.ty =  Math.round( ( event.clientY / window.innerHeight ) * 100 );
};

function update() {
// Interpolate towards the target perspective
perspective.cx += ( perspective.tx - perspective.cx ) * 0.1;
perspective.cy += ( perspective.ty - perspective.cy ) * 0.1;

// Apply the current perspective
world.style.webkitPerspectiveOrigin = perspective.cx + '% ' + perspective.cy + '%';
world.style.perspectiveOrigin = perspective.cx + '% ' + perspective.cy + '%';

// Rinse, repeat
setTimeout( update, 1000 / 30 );
}

Et voilà notre cube 3D qui s'oriente en fonction de la souris fonctionne. Enfin presque, dans certains cas il faut penser à placer les murs au-dessus ou au-dessous des autres éléments à l'aide de la propriété z-index.

Pour les appareils mobiles (iPhone / iPad en l'occurence) la tâche est un peu plus complexe. Nous pouvons accéder au gyroscope  à l'aide de la propriété accelerationIncludingGravity ce qui permet de savoir comment est penché notre appareil. Puis il nous faut détecter l'orientation l'appareil (portrait ou paysage) ce qui se fait par le biais de la propriété window.orientation qui sera égale à 90 ou 0.

A l'aide de ces informations nous pouvons alors placer notre point d'origine d'effet de perspective ainsi :

function onMotionChange( event ) {
	if ( orientation ) {
		var beta = -event.accelerationIncludingGravity.z;
		var gamma = -event.accelerationIncludingGravity.y;
	}else {
		var beta = -event.accelerationIncludingGravity.z;
		var gamma = -event.accelerationIncludingGravity.x;
	}

	perspective.tx = ( ( gamma / 5 ) + 0.5 ) * 100;
	perspective.ty = ( ( beta / 5 ) - 0.5 ) * 100;

	event.preventDefault();
}

A noter l'utilisation de la fonction preventDefault() qui permets de surcharger la fonction de base de l'évènement. Ainsi vous pouvez modifier le comportement par default de l'évènement lors de la rotation de l'appareil.

C'est ainsi que se termine cet article sur cette fonctionnalité plutôt intéressante du CSS 3. WebKit a également une page dédiée aux transformations 3D.