Using CSS3 to realize the windmill effect

Previously said CSS3 can replace a lot of JS implementation of the effect, in fact, many times pure CSS3 can even replace the picture, directly with CSS3 can draw some simple pictures. Although the picture effect of CSS3 may not be as good as directly with the picture, the implementation is more complex, the most troublesome is the compatibility problem, not tablets come directly practical. But a new way of thinking about the solution to the problem often inspires us and helps us learn CSS3.

The demo shown below will be useful for comparing the effects of the windmill with pure CSS3.

First look at the static:

Pure CSS3 Realization of the Windmill animation

Here is a brief introduction to how I use pure CSS3 to achieve a windmill animation effect,

1. Draw the pillars of a windmill

We can see the pole of the windmill is an equilateral trapezoid, through the Width,height property with border we can achieve a lot of geometry, such as triangles, trapezoidal and so on, we can refer to the following ladder to achieve their own test of other graphics.

1. display: block;   
2. height: 0;   
3. width: 4px;   
4. Border-width: 0 4px 80px  4px;   
5. border-style: none solid solid,   
6. border-color: transparent transparent WHITE;  

The effect of the Windmill Truck column

2. Draw the shaft of the windmill

This step is relatively simple, with the Border-radius fillet attribute can be easily implemented.

1. width:4px;   
2. height:4px;   
3. border:3px  #fff   solid;   
4. background: #a5cad6;   
5. border-radius:5PX;  

The effect of the axis of the windmill

3. Draw the leaves of a windmill

The implementation of the windmill leaves is the same as the principle of the pillars, but it is the trapezoid upside down.

1. height: 0;   
2. width: 2px;   
3. border-width: 50px 2px 0px 2px;   
4. border-style: solid solid  none;   
5. border-color: white  Transparent TRANSPARENT ;  

4. Positioning The Windmill page

This is accomplished using transform's rotate (rotation) in CSS3, and one thing to note is that when using rotate, it is necessary to position the center of rotation with origin, which, by default, is centered on the element, where we are positioned at the top of the element.

1. -webkit-transform-origin:0px 0px;
2. -webkit-transform:rotate (60DEG);

Windmill Fan Page Implementation effect

Use the above method to draw three fan blades in turn and position the angle.

5. Realize the dynamic effect of fan page

The static windmill is painted, and the next thing we do is let it move.

Before we can position the fan page in the axis element of the child elements, so that we can only achieve the axis of rotation effect on the fan page will also be moved.

Here is the implementation of the animation

1. @-webkit-keyframes rotate{from{-webkit-transform:rotate (0deg)}to{-webkit-transform:rotate (360deg)}}

Put the Rotate animation method into our axis elements, the fan page can be moved up.

1. -webkit-animation:rotate 4s linear infinite;

6. Improve results and achieve compatibility

At this point our windmill has been basically completed, the previous code is compatible with the WebKit Core browser (Chrome,safari), the next to achieve compatibility with other browsers, and with a mouse hover to speed up the effect of the rotation of our windmill even finished.

CSS3 performance is not the same in various browsers, Chrome browser works best, Safari under the Windmill column will have pixel distortion problem (with the WebKit core, do not know why the performance is so different), follow-up will try to solve the problem.

The following offers demo and

CSS3 Implementation of the Windmill effect download (

Using CSS3 to realize the windmill effect