CSS画一个转动筛子

在小时候我们都有这一个赌侠梦，今天我们就用css来实现一下筛子吧

效果图

实现思路

筛子一共拥有六个面，这里我们就用无序列表盒子进行承载，无序列表里面总共有六个盒子，筛子的点我们通过伪元素的方式实现，由于我们的伪元素只有两个可以操控，所以我们在点数不够的情况下在往里面添加盒子，利用添加盒子的伪元素进行其他点数的实现，这里我们往无序列表中添加i元素作为多余盒子，在通过flex布局结合定位的方式实现点数的布局排列，最后通过css中的transform-style: preserve-3d;属性实现让子元素在3D空间中展示，这样比较好看，然后再通过css属性进行控制每个子元素的排列位置，以此来实现一个方形筛子的六个面，在利用css设置好筛子的旋转点，最后在声明一个css动画，让ul元素通过css属性进行转动

页面结构

  <ul>
        <!-- 一个点 -->
        <li></li>
        <!-- 二个点 -->
        <li></li>
        <!-- 三个点 -->
        <li>
            <i></i>
        </li>
        <!-- 四个点 -->
        <li>
            <i></i>
            <i></i>
        </li>
        <!-- 五个点 -->
        <li>
            <i></i>
            <i></i>
        </li>
        <!-- 六个点 -->
        <li>
            <i></i>
            <i></i>
        </li>
    </ul>

页面初始样式

消除页面初始样式且清除无序列表的默认样式

    * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

筛子

给父元素设置样式，父元素通过定位的方式居于页面的正中间，设置开启3D属性且设置旋转中心

   ul {
            position: absolute;
            top: calc(50% - 50px);
            left:calc(50% - 50px);
            width: 100px;
            height: 100px;
            transform-style: preserve-3d;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            transform-origin: center center;
            animation: rotate 3s linear infinite;
        }

给子元素设置统一的边框背景等样式，开启定位便于后续实现3D的效果

  ul>li {
            box-sizing: border-box;
           position: absolute;
            padding: 10px;
            width: 100px;
            height: 100px;
            background: rgb(199, 185, 185);
            border: 2px solid #000;
        }

点数，这里样式基本一样，使用并集选择器

  ul>li:nth-child(1)::after,
        ul>li:nth-child(2)::after,
        ul>li:nth-child(2)::before,
        ul>li:nth-child(3)::after,
        ul>li:nth-child(3)::before,
        ul>li:nth-child(3) i,
        ul>li:nth-child(4) i::after,
        ul>li:nth-child(4) i::before,
        ul>li:nth-child(5)::after,
        ul>li:nth-child(5) i::after,
        ul>li:nth-child(5) i::before,
        ul>li:nth-child(6)::before,
        ul>li:nth-child(6)::after,
        ul>li:nth-child(6) i::after,
        ul>li:nth-child(6) i::before {
            content: '';
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #000;
        }

给每个子元素开启flex布局，可以操控伪元素和i标签的伪元素，通过他们作为筛子的点数，在通过定位的方式定位点数的位置

一个点

ul>li:nth-child(1) {
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translateZ(50px);
        }

二个点

ul>li:nth-child(2) {
            display: flex;
            justify-content: space-around;
            align-items: center;
            transform: rotateY(180deg) translateZ(50px);
        }

三个点

   ul>li:nth-child(3) {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            transform: rotateY(90deg) translateZ(50px);
        }

四个点

    ul>li:nth-child(4) {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            transform: rotateY(-90deg) translateZ(50px);
        }
         ul>li:nth-child(4) i {
            width: 100%;
            display: flex;
            justify-content: space-between;

        }

五个点

 ul>li:nth-child(5) {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            transform: rotateX(90deg) translateZ(50px);
        }
        ul>li:nth-child(5) i {
            width: 100%;
            display: flex;
            justify-content: space-between;

        }

        ul>li:nth-child(5)::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

六个点

 ul>li:nth-child(6) {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            transform: rotateX(-90deg) translateZ(50px);
        }

        ul>li:nth-child(6) i {
            width: 100%;
            display: flex;
            justify-content: space-between;

        }

        ul>li:nth-child(6)::after {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translate(0, -50%);
        }

        ul>li:nth-child(6)::before {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translate(0, -50%);
        }

声明一个动画且让父元素进行使用

   ul {
            animation: rotate 3s linear infinite;
        }
   @keyframes rotate {
            0% {
                transform: rotate3d(1, 1, 1, 0deg);
            }

            100% {
                transform: rotate3d(1, 1, 1, 360deg);
            }
        }

代码我已经放到码上掘金上了，快来看看吧

我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！