2.CSS几何旋转----正六边形

最新推荐文章于 2023-10-20 13:31:40 发布

Summer丶羽

最新推荐文章于 2023-10-20 13:31:40 发布

阅读量1.3k

点赞数 1

分类专栏： DIV特效文章标签： CSS特效前端特效 animation 几何图形 DIV特效

本文链接：https://blog.csdn.net/qq_42779222/article/details/99703794

版权

本文介绍了如何使用CSS创建正六边形，通过计算宽高比例，利用HTML结构和CSS的伪元素以及transform属性，结合旋转和缩放，实现正六边形的绘制。详细阐述了效果一和效果二的具体代码实现。

摘要由CSDN通过智能技术生成

1.效果图：

在这里插入图片描述

2.HTML结构：

<div class="loading">
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
</div>

3.思路：

要用css绘制正六边形，首先需要你利用勾股定理，计算其宽高的比例，如正六边形的边长为100时，高度为（100100）- （(100/2）(100/2）) ，再将其开方，接着乘以2，就得到173的高度。
然后我们定义3个宽度为100px，高度为173px的区域（div，div:before,div:after），将其绝对定位到一起，然后围绕中心旋转120度、240度，就可以得到一个正六边形。
接着要实现效果一，只需要控制其transform中rotate旋转的角度和scale缩小的比例就行，比例可以再浏览器上进行调试，或者利用js动态计算并将其赋值到css上。

4.1 效果一的具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,body{
      height: 100%;
      width: 100%;
      font-family: 'Open Sans';
      /*overflow: hidden;*/
      background: yellow;
      font-weight: 100;
      color: #181818;
      font-size: 100%;
    }
    *{
      margin: 0;
      padding: 0;
    }
    .loading{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 500px;
      height: 500px;
      overflow: hidden;
      /*background: #aaaaaa;*/
    }
    .div {
      position: absolute;
      width: 100px;
      height: 174.5px;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      background: #333;
      animation: rotate 3s infinite;
    }
    .div:before {
      content: '';
      display: block;
      position: absolute;
      width: 100px;
      height:174.5px;
      background: #333;
      transform: rotate(120deg);
    }
    .div:after {
      content: '';
      display: block;
      position: absolute;
      width: 101px;
      height:174.5px;
      background: #333;
      transform: rotate(60deg);
    }
    .div:nth-child(2){
      transform: translate(-50%,-50%) rotate(-30deg) scale(.85);
      z-index: 10;
      animation: rotate2 3s infinite;
    }
    .div:nth-child(3){
      transform: translate(-50%,-50%) rotate(-60deg) scale(.71);
      z-index: 10;
      animation: rotate3 3s infinite;
    }
    .div:nth-child(4){
      transform: translate(-50%,-50%) rotat