纯css3构建骰子

最新推荐文章于 2022-07-05 00:03:50 发布

weixin_38122772

最新推荐文章于 2022-07-05 00:03:50 发布

阅读量1.7k

点赞数

分类专栏： css3 文章标签： css3 3D 骰子 transform-style

本文链接：https://blog.csdn.net/weixin_38122772/article/details/99627201

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上一篇（点击查看）用flex构建了骰子的六个面，现在用css3的3D属性把骰子面拼成骰子，如下：
在这里插入图片描述
flex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    // 引入flex.less编译后的css文件
    <link rel="stylesheet" type="text/css" href="flex.css" />
</head>

<body>
    <div class="wrapper">
        <div class="box1">
            <span></span>
        </div>
        <div class="box2">
            <span></span>
            <span></span>
        </div>
        <div class="box3">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box4">
            <div>
                <span></span>
                <span></span>
            </div>
            <div>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="box5">
            <div>
                <span></span>
                <span></span>
            </div>
            <span></span>
            <div>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="box6">
            <div>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</body>
</html>

flex.less

html, body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
}

@keyframes rotate {
  from {
    transform: rotateY(0deg) rotateX(0deg);
  }
  to {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

.wrapper {
  height:100px;
  width:100px;
  position:relative;
  margin:auto;
  transform-style:preserve-3d; // 表示所有子元素在3D空间中呈现
  -webkit-animation:rotate 15s infinite;
  -o-animation:rotate 15s infinite;
  animation:rotate 15s infinite;
}

body > .wrapper > div {
  height:100%;
  width:100%;
  opacity:0.9;
  position:absolute;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  display: flex;
  align-self: center;
  border: 1px solid #dfdfdf;
  span {
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
  }
}
// --------- 构建骰子面 --------
.box1 {
  align-items: center;
  justify-content: center;
}
.box2 {
  justify-content: space-between;
  span:last-child {
    align-self: flex-end;
  }
}
.box3 {
  justify-content: space-between;
  span:nth-of-type(2) {
    align-self: center;
  }
  span:last-child {
    align-self: flex-end;
  }
}
.box4 {
  flex-direction: column;
  justify-content: space-between;
  & > div {
    display: flex;
    justify-content: space-between;
  }
}
.box5 {
  justify-content: space-between;
  & > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  & > span {
    align-self: center;
  }
}
.box6 {
  justify-content: space-between;
  & > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

// -------------构建骰子面位置和旋转度---------
.box1 {
  transform:translateZ(70px); // 70px = 骰子面一半的长度50px + padding的20px
}
.box2 {
  transform:rotateY(180deg) translateZ(70px);
}
.box3 {
  transform:rotateY(270deg) translateZ(70px);
}
.box4 {
  transform:rotateX(270deg) translateZ(70px);
}
.box5 {
  transform:rotateX(90deg) translateZ(70px);
}
.box6 {
  transform:rotateY(90deg) translateZ(70px);
}

weixin_38122772

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
纯css3构建骰子

上一篇（点击查看）用flex构建了骰子的六个面，现在用css3的3D属性把骰子面拼成骰子，如下：flex.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> // 引入fle...
复制链接

扫一扫