Rotating hexagonal three lines, the front end computer examination Detailed

Topics requirements: html5 hexagonal array with three rows and css3 achieved, and the mouse is placed rotation effect, the mouse leaves the reverse rotation effect

(FIG mouse leaves the lower right corner of the hexagons, hexagons toward the upper left)

Ideas:

1. hexagon implementation

First to analytic geometry, assuming the distance between the sides of the hexagon is the 50px, and white point of the hexagon is about 87px, copy rotation 87px * 50px 3 rectangle can constitute a regular hexagon

How to copy a rectangle can make it three rectangular form a whole, where I used before and after pseudo class to achieve

Note that the rectangle is provided for the pseudo-class absolute positioning, so that the two rectangles overlap pseudo-classes, then the reverse rotation of 60 degrees to each

To make a plurality of hexagons arranged in one row, only the element set as a block to the line

Hexagonal wrapping lines, add an empty div element after 4 and 7 hexagons, hexagons and 5 for the first set left margins, to complete the three rows of hexagonal

2. Rotate

The transition animations use css3 hover can be combined with simple implementation

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>六边形</title>
        <style>
            .hexagon, .hexagon:before, .hexagon:after{
                width: 87px;
                height: 50px;
                background: red;
            }
            .hexagon{
                margin-top: 25px;
                display: inline-block;
                transition: transform 1s;
            }
            .hexagon:before{
                content: "";
                display: block;
                position: absolute;
                transform: rotate(60deg)
            }
            .hexagon:after{
                content: "";
                display: block;
                position: absolute;
                transform: rotate(-60deg)
            }
            .second{
                margin-left: 46px;
            }
            .hexagon:hover{
                transform: rotate(360deg);
            }
        </style>
    </head>
    <body>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div></div>
        <div class="hexagon second"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
        <div class="hexagon"></div>
    </body>
</html>

Rotating hexagonal three lines, the front end computer examination Detailed

Guess you like