TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan lage CSS Rotating Cube Widget?

1

CSS er et dyr, spesielt når du er i en læringsfase, er det morsomt å praktisere forskjellige egenskaper. CSS webkit -animasjonsegenskaper er interessante å leke for å lage attraktive animasjoner for nettstedet ditt. I denne artikkelen vil vi lage en enkel CSS -roterende kube -widget ved hjelp av nøkkelrammer.

Relatert: HTML -opplæring for nybegynnere.

Hva er roterende kube?

Den roterende kuben vil se ut som nedenfor.

Du kan vise frem tekst eller bilder på seks ansikter på kuben og kontrollere rotasjonshastigheten slik at seerne kan forstå under rotasjon. For eksempel kan du bruke produktbildene dine til å vise frem på butikksiden med hvert bilde som lenker til den tilsvarende produktsiden.

Komponenter i widgeten

Widgeten har to komponenter – CSS og HTML. Det anbefales å plassere CSS -delen inne i overskriftsseksjonen på websiden og HTML -delen inne i kroppen.

1 CSS for widgeten

Nedenfor er CSS for den roterende kube -widgeten. Vi definerer først en boks, legger til seks sider og roterer boksen med webkit -nøkkelrammer.

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

Nedenfor er HTML -koden widgeten, du må erstatte bildene med dine egne bilde -URL -er.

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

Tilpasse widgeten

Du kan tilpasse widgeten etter ditt behov, og nedenfor er noen alternativer:

  • Bokstørrelsen brukes som 250x250px og translateZ brukes med halvparten av bredden som 125px. Hvis du vil endre boksestørrelsen, må du sørge for å endre begge disse parameterne tilsvarende.
  • Sørg for å bruke bildene som har samme dimensjoner som boksen. I dette eksemplet har vi brukt 250x250px bilder på alle sider av esken. Du kan også bruke hvilken som helst tekst i stedet for bilde eller tekst / bildekombinasjon på forskjellige ansikter.
  • Rotasjonshastigheten er definert som 6 sekunder i CSS som "-webkit-animation-duration: 6s;". Du kan øke eller redusere rotasjonshastigheten basert på ditt behov.
  • Bruk nøkkelramme -animasjonsprosentverdiene for å endre transformasjonshastigheten.
  • Boksenes posisjon er definert ved hjelp av innebygd stil i HTML -kode som 350px bredde, 250px høyde og 180px margin. Du kan justere disse verdiene for å plassere kuben riktig på nettsiden din.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon