旋转的三行六边形，前端机试题详解

jinyuu 2019-08-26 原文

题目要求：用html5和css3实现三行六边形排列，且鼠标放置有旋转效果，鼠标离开有反向旋转效果

（如图，鼠标离开右下角的六边形，移向左上的六边形）

思路：

1. 六边形的实现

先来解析几何，假设六边形的边是50px，则六边形相间的点之间的距离约为87px，用3个87px*50px矩形复制旋转即可构成正六边形

怎样复制矩形可以让三个矩形形成一个整体呢，这里我用before和after的伪类来实现

注意设置伪类的矩形为绝对定位，让两个伪类矩形重叠在一起，再反向各旋转60度即可

要让多个六边形排列在一行，只需把元素设置为行内块即可

六边形要换行，则在第4和第7个六边形后添加一个空的div元素，并为第5个六边形设置左外边距，即可完成三行六边形

2. 旋转

使用css3的transition动画效果结合hover即可简单实现

<!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>