3D Animation Cube

• Download 3D cube - 993 B

Introduction

Cascading Style Sheets (CSS3) are the tools that web designers and developers use alongside markup languages such as HTML and XHTML to build websites. CSS3 provides web browsers with the information they need to control the visual aspect of a web page, such as the position of HTML elements, text styles, backgrounds, colors and images, and much more. Advanced CSS3 techniques give website authors the ability to tailor layouts and designs for mobile web browsers, as well as the skills they need to create websites for regular desktop browsers. I will introduce you to the basics of writing CSS3 for animation of a 3D Cube without any script line.

CSS3 provides two methods for performing animations: transitions and animations.They’re similar in how they work, but serve two distinct purposes. Transitions let us state that we want a property to gradually change from one value to another. Animations let us get more specific, defining keyframes for complex animations.

In this project, I used HTML & CSS3. I will explain them.

HTML Codes

We have six images named from 1 to 6 .png that represent the cube faces. There is a common class identifier called "face" that determines the attribute of each face. There are six separated ids "F1" ,"F2" . . . "F6" that have arrangement in such a way and rotate with specific angles separately to look like a cube. All of these objects are inside a div id called "cube" which are inside another div id called "container".

CSS3 Codes

The scenario begins with body and takes a background color blue. The class face positioning is absolute in order to seem as in stack and takes width & height 360 px, here I give it a 40px padding to make to see inside the cube. The technique of @-webkit-keyframes rotate is used to animate an object from a given angle to another in this project I used from (0 deg) and in 50% give (360 deg) then return back to (0 deg) to rotate right and left later. The id cube is given an auto margin and takes width & height 400 px, I used the following webkits:

• webkit-transform-style: Preserve-3D to Enable 3D style
• webkit-animation-name: Rotate type of animation is rotating
• webkit-animation-duration: 20s duration of animation in seconds
• webkit-animation-timing-function: Ease-in-out timing function of animation make the cube to begin faster and then slow down gradually
• webkit-animation-iteration-count: Infinite the infinitely around Y axis 360 deg right and left infinite property of iteration make cube to rotate

The id "container" holds the whole content of the cube and should have a perspective in this case the perspective is 800 px .The perspective origin property defines where a 3D element is based in the x- and the y-axis. This property allows you to change the bottom position of 3D elements.

To arrange cube's faces around X and Y axis and translate, I used the following property:

#F1 {
-webkit-transform:rotateX(90deg)translatez(200px); 
} 
#F2 {
-webkit-transform:translatez(200px); 
}
#F3 {
-webkit-transform:rotateY(90deg)translatez(200px); 
}
#F4 {
-webkit-transform:rotateY(180deg)translatez(200px); 
}
#F5 {
-webkit-transform:rotateY(-90deg)translatez(200px); 
}
#F6 {
-webkit-transform:rotateX(- 
90deg)translatez(200px)rotate(180deg); 
} 

Exciting innovations, such as animation in CSS, will encourage talented designers to push the boundaries of what web browsers are capable of, and, as CSS authors, you and I will be the ones that get to build beautiful and engaging sites with a potential audience greater than that of any other form of art. The future is bright for CSS3.