Shulou(Shulou.com)05/31 Report--

This article mainly explains "the method of 2D simulation to realize the rotation effect of Ferris wheel in CSS3". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "the method of 2D simulation to achieve the rotation effect of the Ferris wheel in CSS3".

Take a look at the effect picture first:

Because of the size of the upload, it can only be recorded like this, and the original image is an infinite loop.

Code:

Simulate the Ferris wheel animation * {margin:0;padding:0;} .image {width:80px;height:80px;} .image1 {width:620px;height:620px;} .div1 {position:relative;margin:10px auto;width:638px; animation:run 20s linear infinite;-webkit-animation:run 20s linear infinite;-moz-animation:run 20s linear infinite -o-animation:run 20s linear infinite;} img:nth-child (2) {position:absolute;top:25px;left:270px;opacity:0.7; animation:run2 20s linear infinite;-webkit-animation:run2 20s linear infinite;-moz-animation:run2 20s linear infinite;-o-animation:run2 20s linear infinite Transform-origin:top center;-webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center;} img:nth-child (3) {position:absolute;top:580px;left:270px;opacity:0.7; animation:run2 20s linear infinite -webkit-animation:run2 20s linear infinite;-moz-animation:run2 20s linear infinite;-o-animation:run2 20s linear infinite; transform-origin:top center;-webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center } img:nth-child (4) {position:absolute;top:300px;left:550px;opacity:0.7; animation:run2 20s linear infinite;-webkit-animation:run2 20s linear infinite;-moz-animation:run2 20s linear infinite;-o-animation:run2 20s linear infinite; transform-origin:top center -webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center;} img:nth-child (5) {position:absolute;top:300px;left:0px;opacity:0.7; animation:run2 20s linear infinite;-webkit-animation:run2 20s linear infinite -moz-animation:run2 20s linear infinite;-o-animation:run2 20s linear infinite; transform-origin:top center;-webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center } @ keyframes run {0% {transform:rotate (0deg)} 100% {transform:rotate (360deg)} @-webkit-keyframes run {0% {- webkit-transform:rotate (0deg)} 100% {- webkit-transform:rotate (360deg)} } @-moz-keyframes run {0% {- moz-transform:rotate (0deg)} 100% {- moz-transform:rotate (360deg)}} @-o-keyframes run {0% {- o-transform:rotate (0deg)} 100% {- o-transform : rotate (360deg)} @ keyframes run2 {0% {transform:rotate (0deg)} 100% {transform:rotate (- 360deg)}} @-webkit-keyframes run2 {0% {webkit-transform:rotate (0deg)} 100 % {- webkit-transform:rotate (- 360deg)} @-moz-keyframes run2 {0% {- moz-transform:rotate (0deg)} 100% {- moz-transform:rotate (- 360deg)}} @-o-keyframes run2 {0% {- o-transform:rotate ( 0deg)} 100% {- o-transform:rotate (- 360deg)}}

Original picture of Ferris wheel:

Note: the transform-origin attribute allows you to change the location of the transformed element.

The main function of this property is to select a position and then rotate around that position.

At this point, I believe you have a deeper understanding of the "2D simulation of the Ferris wheel rotation effect in CSS3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.