Css3 Slot Machine Animation
Related Content
To use CSS3 Animation you must also define the actual animation keyframes (which you named spin) Read for more info Once you've configured the animation's timing, you need to define the appearance of the animation. Slots have come a long way from the old novelty items found in early 20 th century saloons, but the classic slot machine has remained a tried and tested favorite of slots enthusiasts the world over. Free 3 reel slots offer players the elegance, ease and simplicity.
Free Design Materials – 30 Best Animated Navigation Bar or Tab Bar Designs for Inspiration
Here is a collection of 30 best animated navigation bar or tab bar designs for you to get inspiration. Taking these design examples for better inspiration of your design.OverviewLooking for inspir...
8 Best Animated Websites with CSS & HTML Animation to Inspire You
Animated websites, one of the hot website design trends of 2018, has become an inseparable part of user experience for modern websites. You can find animations on websites everywhere, whether it be su...
10 Best UI Animation Tools for Great Modern Designs in 2020
Animation got more popular and became an indispensable part of web and app design in recent years. UI animation tools have gained more attention and usage in daily design work because the designers kn...
Look Inside
Hello there! Today I would like to show you how to create an amazing 3D rotation animation using CSS3 3D transforms and CSS3 animation properties, WITHOUT using JavaScript. You might, of course, can check out others amazing CSS3 effects like CSS3 background animation and pure CSS3 logo and icons.
The idea is to create a 3D ‘cube‘ gallery effects. Few cubes are located near each other with different images bind to cubes’ faces. These cubes will then rotate itself one by one with different timing and stop for awhile, and then rotate and stop again after this. The process will keep repeating itself. Check out the demo above to see it with your eyes!
The initial idea was inspired by CCSlider 3D cube effect, so I decide to create one similar but with CSS3 only. Anyway, you may go through the HTML markup and CSS style below for this CSS3 3D animation demo if you wish to know how it works. Otherwise you can just skip the part below and enjoy the cube rotation effect by CSS3 3D transforms.
[browser type=”cxsxx”]The demo only works on browsers that support CSS3 3D transforms, such as Chrome and Safari.[/browser]
Build a Cube
Let’s get it started with our core element – cube. This might not related to our demo, however it will be your fundamental before starting CSS3 3D transforms.
We all know that a basic cube consists of six faces, which are front, back, top, bottom, left and right. So we have to define these six faces using HTML element, and differential each other with different CSS classes.
However, these HTML elements won’t be able to become a cube automatically without help from CSS3 3D transforms.
The ‘viewStage’ is the element in which our 3D animation takes place. All the elements inside will move and rotate in relation to this viewStage, which itself will remain fixed to the page.
The perspective attribute defines how far (Z-axis) the 3D element is placed from the view. The larger this value the less obvious the 3D effect.
If you paste the HTML and CSS markup above into your text editor and run it, you will see a colorful cube if your browser support of CSS3 3D transforms. Otherwise you will only able to see two rectangles with different color.
Css3 Slot Machine Animation Software
Right now, try modifying the perspective value and see the what happens to the cube.
Multiple Cubes
After the fundamental of creating a cube using CSS3 3D transforms, we will be going through the HTML and CSS markup of DEMO1. However, all the vendor prefixes will be excluded from the code, but you can still find them in the files.
The first step is to create few cubes and combine them into one big cube. We could achieve this by duplicates the cube markup above and styling it using different CSS. After then, name the cubes’ element with different ID.
Css Slot Machine Animation
The CSS for combining these cubes are as below.
The -webkit-backface-visibility attribute is used to specific whether or not the element should be visible when not facing the screen. The default value is visible.
Our next task is to bind the cubes’ faces with different images and positioning it according to the cubes location.
Cube Rotation
Now, we will make these cubes rotate itself automatically! In this case we use ‘rotation‘ keyframes.
The CSS attributes above will generate an animation with duration of 15 seconds.
The ‘rotation‘ keyframes for DEMO1 will be look like below. This keyframes will rotate the cube by quarter-circle and then pause it for few seconds, after that the cube will rotate and pause again.
You could actually perform more complicated rotation like DEMO2 or DEMO3 by amending the keyframes values. Download the files for more details about keyframes setting.
Enhancements
By the time now, you should able to see the cube rotation effect. However the effect looks rigid and inflexible. Hence we have to do some enhancements on this.
First, let’s make the rotation looks more attractive by adding some animation-delay attribute to each cube.
Next, add more flexible easing instead of default easing.
Last, detect non-supported browsers using media query based on CSS3 3D transforms properties. If user browser doesn’t support CSS3 3D transform, display non-support text message, and vice versa.
Css3 Slot Machine Animation Games
Final Thoughts
As you can see, currently not much browsers are support CSS3 3D transforms yet. Hence, you have to consider those non-supported browsers in order to use these new CSS3 attributes. For example, if you use Firefox to browse the demo page, you will see a sliding effect, but if you browse the demo page using IE, it will only shows a text message.
All of these checking mechanisms are simply done by CSS. Yes, of course you could build more complicated drawbacks and effects using JavaScript or jQuery. But I will left the part for you!