css3 implements cube and rotation effect_html/css

css3 implements cube and rotation effect_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:07:39

Original

1031 people have browsed it

First, HTML. A parent div contains four absolutely positioned divs

-child(1) { -webkit-transform: /*rotateY(0deg)*/ translateZ(2.5em /* half the side length, 5em in this case */); } .face:nth-child(2) { - webkit-transform: rotateY(90deg) translateZ(2.5em); } .face:nth-child(3) { -webkit-transform: rotateY(180deg) translateZ(2.5em); } .face:nth-child(4) { -webkit-transform: rotateY(270deg) translateZ(2.5em); }

Let the cube rotate

.cube--ani { -webkit-animation: rot 4s linear infinite; } @-webkit-keyframes rot { to { -webkit-transform: rotateY(-330deg) rotateX(370deg); } }

An animation rot

is defined here

Rotate from the starting position to Y-axis -330deg X-axis 370deg

And loop infinite times, 4s each time

OK!

Related labels：

css3实现立方体，并且自转效果

source：php.cn

Previous article：Unique design! The use of illustrations and hand-drawn elements in web design_html/css_WEB-ITnose Next article：In myeclipse, it is not easy to move the css file to other folders under the webroot, as shown in the figure. _html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn