CSS3--3D rotation diagram (lawn lamp effect diagram), css3 lawn lamp

CSS3--3D rotation diagram (lawn lamp), css3 lawn lamp

CSS3 has added many new attributes that can use a small amount of code to achieve cool animation effects. However, due to the lack of compatibility with various browsers, websites with special needs will be okay. H5C3 is the trend of the times. I have read a piece of news before. Chrome will turn to H5 at the end of the year and abandon Flash ..

In this case, the transform and animation attributes in CSS3 are used to achieve the running horse effect. A detailed explanation is provided in the comments in the code.

After the layout is completed

 

Added the animation style to achieve automatic rotation, move the mouse in and stop the animation. (Move the mouse in, Rotate 90 degrees around the Z axis)

Code:

1 <! DOCTYPE html> 2