Hur skapar jag en CSS -roterande kubwidget?

CSS är ett odjur, särskilt när du är i en inlärningsfas är det roligt att öva på olika egenskaper. CSS webkit -animationsegenskaper är intressanta att spela för att skapa attraktiva animationer för din webbplats. I den här artikeln kommer vi att skapa en enkel CSS -roterande kubwidget med hjälp av nyckelramar.

Relaterat: HTML -handledning för nybörjare.

Vad är roterande kub?

Den roterande kuben kommer att se ut nedan.

Du kan visa upp text eller bilder på kubens sex ansikten och styra rotationshastigheten så att tittarna kan förstå under rotation. Till exempel kan du använda dina produktbilder för att visa upp butiksidan med varje bild som länkar till motsvarande produktsida.

Komponenter i widgeten

Widgeten har två komponenter – CSS och HTML. Det rekommenderas att placera CSS -delen inuti sidhuvudet på webbsidan och HTML -delen i kroppen.

1 CSS för widgeten

Nedan visas CSS för den roterande kubwidgeten. Vi definierar först en ruta, lägger till sex sidor och roterar lådan med webbkit -nyckelramar -animering.

<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 för widgeten

Nedan är HTML -koden widgeten, du måste ersätta bilderna med dina egna bildadresser.

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

Anpassa widgeten

Du kan anpassa widgeten efter dina behov och nedan följer några alternativ:

• Boxstorleken används som 250x250px och translateZ används med hälften av bredden som 125px. Om du vill ändra rutans storlek, se till att ändra båda dessa parametrar i enlighet därmed.
• Se till att använda bilderna med samma dimensioner som rutan. I det här exemplet har vi använt 250x250px bilder på alla sidor av lådan. Du kan också använda valfri text istället för bild eller text / bildkombination på olika ansikten.
• Rotationshastigheten definieras som 6 sekunder i CSS som "-webkit-animation-duration: 6s;". Du kan öka eller minska rotationshastigheten baserat på ditt behov.
• Använd nyckelramens animationsprocentvärden för att ändra transformationshastigheten.
• Boxens position definieras med inline -stil i HTML -kod som 350px bredd, 250px höjd och 180px marginal. Du kan justera dessa värden för att placera kuben korrekt på din webbsida.