TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer un widget de cube rotatif CSS ?

12

CSS est une bête, surtout lorsque vous êtes en phase d’apprentissage, c’est amusant de pratiquer différentes propriétés. Les propriétés d’animation CSS webkit sont intéressantes à jouer pour créer des animations attrayantes pour votre site. Dans cet article, nous allons créer un simple widget de cube rotatif CSS à l’aide d’images clés.

Connexe : Tutoriel HTML pour les débutants.

Qu’est-ce que le cube rotatif ?

Le cube en rotation ressemblera à ci-dessous.

Vous pouvez présenter du texte ou des images sur six faces du cube et contrôler la vitesse de rotation afin que les spectateurs puissent comprendre pendant la rotation. Par exemple, vous pouvez utiliser les images de vos produits pour les présenter sur la page du magasin, chaque image renvoyant à la page du produit correspondante.

Composants du widget

Le widget a deux composants – CSS et HTML. Il est recommandé de placer la partie CSS dans la section d’en-tête de la page Web et la partie HTML dans le corps.

1 CSS pour le widget

Vous trouverez ci-dessous le CSS du widget de cube rotatif. Nous définissons d’abord une boîte, ajoutons six côtés et faisons pivoter la boîte avec l’animation des images clés du kit Web.

<style type="text/css"> #box div { position: absolute; height: 250px; width: 250px; border: 1px solid lightgrey; background: rgba(255,200,100,0.8); text-align: center; font-size: 200px; } #box { -webkit-animation-name: animation; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 6s; margin:80; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 125px 125px 0; } #box .one { -webkit-transform: translateZ(125px); } #box .two { -webkit-transform: rotateX(-90deg) translateZ(125px); } #box .three { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(125px); } #box .four { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px); } #box .five { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px); } #box .six { -webkit-transform: rotateY(90deg) translateZ(125px); } @-webkit-keyframes animation { from,to{} 16% { -webkit-transform: rotateY(-90deg);} 33% { -webkit-transform: rotateY(-90deg) rotateZ(135deg);} 50% { -webkit-transform: rotateY(225deg) rotateZ(135deg);} 66% { -webkit-transform: rotateY(135deg) rotateX(135deg);} 83% { -webkit-transform: rotateX(135deg);} } </style>

2 HTML pour le widget

Vous trouverez ci-dessous le code HTML du widget, vous devez remplacer les images par vos propres URL d’images.

<div id="view" style="width:350px; height:250px; margin:80px auto 0 auto;"> <div id="box"> <div class="one"><img src="https://img.webnots.com/2016/09/A-One.png"></div> <div class="two"><img src="https://img.webnots.com/2016/09/B-Two.png"></div> <div class="three"><img src="https://img.webnots.com/2016/09/C-Three.png"></div> <div class="four"><img src="https://img.webnots.com/2016/09/D-Four.png"></div> <div class="five"><img src="https://img.webnots.com/2016/09/E-Five.png"></div> <div class="six"><img src="https://img.webnots.com/2016/09/F-Six.png"></div> </div> </div>

Personnalisation du widget

Vous pouvez personnaliser le widget selon vos besoins et voici quelques options :

  • La taille de la boîte est utilisée comme 250x250px et le translateZ est utilisé avec la moitié de la largeur comme 125px. Si vous souhaitez modifier la taille de la boîte, assurez-vous de modifier ces deux paramètres en conséquence.
  • Assurez-vous d’utiliser les images ayant les mêmes dimensions que la boîte. Dans cet exemple, nous avons utilisé des images 250x250px sur tous les côtés de la boîte. Vous pouvez également utiliser n’importe quel texte au lieu d’une image ou une combinaison texte/image sur différents visages.
  • La vitesse de rotation est définie comme 6 secondes dans CSS comme "-webkit-animation-duration: 6s;". Vous pouvez augmenter ou diminuer la vitesse de rotation en fonction de vos besoins.
  • Utilisez les valeurs de pourcentage d’animation d’images clés pour modifier la vitesse de transformation.
  • La position de la boîte est définie à l’aide du style en ligne dans le code HTML avec une largeur de 350 px, une hauteur de 250 px et une marge de 180 px. Vous pouvez ajuster ces valeurs pour positionner correctement le cube sur votre page Web.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails