Dans ce tuto CSS3 en vidéo, nous verrons comment réaliser un cube 3D en CSS3 avec des images représentant des produits Apple.
Ensuite, nous verrons comment réaliser avec Jquery un effet de rotation lorsque l'utilisateur cliquera sur des boutons pour faire pivoter le cube sur la droite ou sur la gauche et ainsi avoir le produit qu'il souhaite en face de lui à l'écran.
Pour finir, nous verrons comment faire en sorte d'afficher les informations d'un produit que l'on ira récupérer en base de données pour les afficher au visiteur lorsque qu'il cliquera sur un produit. Cette récupération d'informations et l'affichage de celles-ci sera fait en AJAX, c'est à dire sans rechargement de la page dans le navigateur. Pour cela nous utiliserons PHP, MySQL, Jquery et le format de données JSON pour transmettre les données du serveur au client (du PHP au Javascript).
A noter que l'effet de 3D présenté dans le tutoriel ne fonctionnera que sur Google Chrome et Safari.
Bon tuto!
Avis des apprenants