TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare un widget cubo rotante CSS?

13

I CSS sono una bestia, specialmente quando sei in una fase di apprendimento, è divertente praticare diverse proprietà. Le proprietà di animazione del webkit CSS sono interessanti da giocare per creare animazioni attraenti per il tuo sito. In questo articolo creeremo un semplice widget cubo rotante CSS utilizzando i fotogrammi chiave.

Correlati: tutorial HTML per principianti.

Cos’è il cubo rotante?

Il cubo rotante apparirà come sotto.

Puoi mostrare testo o immagini su sei facce del cubo e controllare la velocità di rotazione in modo che gli spettatori possano capire durante la rotazione. Ad esempio, puoi utilizzare le immagini del tuo prodotto per mostrare sulla pagina del negozio con ogni immagine che si collega alla pagina del prodotto corrispondente.

Componenti del widget

Il widget ha due componenti: CSS e HTML. Si consiglia di posizionare la parte CSS all’interno della sezione di intestazione della pagina Web e la parte HTML all’interno del corpo.

1 CSS per il widget

Di seguito è riportato il CSS per il widget del cubo rotante. Per prima cosa definiamo una scatola, aggiungiamo sei lati e ruotiamo la scatola con l’animazione dei fotogrammi chiave del webkit.

<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 per il widget

Di seguito è riportato il codice HTML del widget, è necessario sostituire le immagini con i propri URL di immagine.

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

Personalizzazione del widget

Puoi personalizzare il widget secondo le tue necessità e di seguito sono riportate alcune opzioni:

  • La dimensione della casella viene utilizzata come 250x250px e translateZ viene utilizzata con metà della larghezza come 125px. Se desideri modificare le dimensioni della scatola, assicurati di modificare entrambi questi parametri di conseguenza.
  • Assicurati di utilizzare le immagini aventi le stesse dimensioni della scatola. In questo esempio, abbiamo utilizzato immagini 250x250px su tutti i lati della scatola. Puoi anche utilizzare qualsiasi testo al posto dell’immagine o una combinazione di testo/immagine su facce diverse.
  • La velocità di rotazione è definita come 6 secondi nei CSS come "-webkit-animation-duration: 6s;". Puoi aumentare o diminuire la velocità di rotazione in base alle tue necessità.
  • Utilizzare i valori percentuali di animazione dei fotogrammi chiave per modificare la velocità di trasformazione.
  • La posizione della casella è definita utilizzando lo stile in linea nel codice HTML come 350 px di larghezza, 250 px di altezza e 180 px di margine. Puoi regolare questi valori per posizionare correttamente il cubo sulla tua pagina web.

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More