CSS is a beast, especially when you are in a learning phase, it is fun to practice different properties. CSS webkit animation properties are interesting to play around for creating attractive animations for your site. In this article we will create a simple CSS rotating cube widget using keyframes.
Related: HTML tutorial for beginners.
What is Rotating Cube?
The rotating cube will look like below.
You can showcase text or images on six faces of the cube and control the rotating speed so that the viewers can understand during rotation. For example, you can use your product images to showcase on the store page with each image linking to the corresponding product page.
Components of the Widget
The widget has two components – CSS and HTML. It is recommended to place the CSS part inside header section of the webpage and HTML part inside the body.
1. CSS for the Widget
Below is the CSS for the rotating cube widget. We first define a box, add six sides and rotate the box with webkit keyframes animation.
<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 the Widget
Below is the HTML code the widget, you need to replace the images with your own image URLs.
<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>
Customizing the Widget
You can customize the widget as per your need and below are some options:
- The box size is used as 250x250px and the translateZ is used with half of the width as 125px. If you want to change the box size, ensure to change both these parameters accordingly.
- Ensure to use the images having same dimensions that of the box. In this example, we have used 250x250px images on all sides of the box. You can also use any text instead of image or text / image combination on different faces.
- The rotating speed is defined as 6 seconds in CSS as “-webkit-animation-duration: 6s;”. You can increase or decrease the rotation speed based on your need.
- Use the keyframe animation percentage values to change the transformation speed.
- The position of the box is defined using inline style in HTML code as 350px width, 250px height and 180px margin. You can adjust these values to position the cube properly on your webpage.
2 Comments
Leave your reply.