Pure html+css make 3D cubes and animated effects

Source: Internet
Author: User

Today, is a cube + animation made with CSS3, the effect is as follows.

The whole effect is only the HTML and CSS, not a sentence JS, in fact, the first is to use JS to give six of the small squares to assign value, and then forced to commit a crime, direct manual write it, such a sentence JS are not, more crisp point.

The following is the body of the overall structure, a class called the big box, placed six UL, each UL given a different class name, marked the location of the UL surface, the six UL will be the cube's six faces.

<Divclass= "Big">    <ulclass= "after"></ul>    <ulclass= "Left"></ul>    <ulclass= "Right"></ul>    <ulclass= "Top"></ul>    <ulclass= "Bottom"></ul>    <ulclass= "Before"></ul></Div>

The following is the CSS style of the large box big, and the style of the CSS animation he wants to invoke.

. Big{position:relative;width:300px;Height:300px;margin:150px Auto 0;Transform-style:preserve-3d;Animation:Animate 6s Infinite;}@keyframes Animate{0% {Transform:Translate ( -400px) Rotatex (0deg) Rotatey (0deg) Rotatez (0deg); }50%{Transform:Translate (400px) Rotatex (0deg) Rotatey (360deg) Rotatez (360deg); }100%{Transform:Translate ( -400px) Rotatex (0deg) Rotatey (0deg) Rotatez (0deg); }}

The following is a unified style of six UL and Li, including size, positioning, some styles of text, and so on.

. Big ul{width:300px;Height:300px;position:Absolute;font-size:200px;text-align:Center;Line-height:300px;Color:#fff;}. Big Li{float: Left;width:80px;Height:80px;Border-radius:30%;margin:10px;List-style:None;font-size:50px;text-align:Center;Line-height:80px;}

Below for each UL through the Transfrom property, set to a different location, as well as the internal Li background color settings, here only write the left class, the other five faces similar.

{    transform: rotatey ( -90deg) Translatez (150px);}  {    background-color: #a9f;     Opacity: 0.9;}

The whole effect is written out, or relatively simple, as long as the meaning of the command, the rest is to organize the logic, perhaps for some people, six faces is a difficult position, and the other part of the people, the animation is difficult to write, and some people ... Can't make up, feel really no difficulty, so also can not speculate other people think the difficulty is where

The feeling, or the front of the bouncing ball is more trouble points.

Pure html+css make 3D cubes and animated effects

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.