CSS3制作立方体

最新推荐文章于 2020-04-23 09:09:45 发布

Nikki_0720

最新推荐文章于 2020-04-23 09:09:45 发布

阅读量358

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Nikki_0720/article/details/104737290

版权

通过本周逆战班的学习，我们来复习一下如何使用css3制作一个立方体。
首先我们进行分析：
既然是立方体，顾名思义拥有六个相同的面，所以我们需要制作6个相同的元素并分别使它们旋转形成一个正方体。这里我选择使用无序列表ul、li制作。
在设计正方体之前，我们需要先定义全局样式，取消它们的margin、padding值以及li的列表属性：

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

接下来我们定义ul的样式，给它一个合适的宽高和水平居中，并使其拥有3D属性和相对定位方便接下来我们对li的操作。

ul{
    width: 200px;
    height: 200px;
    margin: 200px auto;
    position: relative;
    transform-style: preserve-3d;
    transition: 5s linear;  /*5s过渡时间  匀速*/
   }

现在我们开始定义li的属性，我们给每一个li相同与ul的宽高以及相同的绝对定位让6个li堆叠显示在ul中并且给每个li不同的背景颜色。此时，我们让堆叠在最上层和最下层的两个li分别沿着z轴向上和向下移动半个身位，再让中间的4个li沿着x轴或y轴分别向四周移动半个身位后翻转90°就可以形成一个正方体。
我们先只移动li：

li:nth-child(1){
    background: palegoldenrod;
    transform: translateZ(100px);
   }
   li:nth-child(2){
    background: palegreen;
    transform: translateX(-100px);
   }
   li:nth-child(3){
    background: paleturquoise;
    transform: translateX(100px);
   }
   li:nth-child(4){
    background: papayawhip;
    transform: translateY(-100px);
   }
   li:nth-child(5){
    background: palevioletred;
    transform: translateY(100px);
   }
   li:nth-child(6){
    background: palegoldenrod;
    transform: translateZ(-100px);
   }

这时得到如下的效果图（为了方便观察我给每个li设置了透明度）：

在这里插入图片描述
接下来我们让中间的4个li翻转，比如右侧和右侧的li，我们让它们沿着沿着y轴旋转90°，上方和下方的li沿x轴旋转90°，这样一个完整的正方体就形成了。

效果如下图
在这里插入图片描述
这时我们发现在网页上只能显示一个面，所以我们需要给ul设置一个滑过属性让它转动起来：

ul:hover {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
   }

这时正方体就转动起来了
在这里插入图片描述
至此一个使用css的立方体就制作出来了

下面附上完整代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   li{
    list-style: none;
   }
   ul{
    width: 200px;
    height: 200px;
    margin: 200px auto;
    position: relative;
    transform-style: preserve-3d;
    transition: 5s linear;  /*5s过渡时间  匀速*/
   }
   li{
    width: 200px;
    height: 200px;
    position: absolute;
    opacity: 0.6;
    left: 0;
    top: 0;
    border: 2px solid darkgrey;
   }
   li:nth-child(1){
    background: palegoldenrod;
    transform: translateZ(100px);
   }
   li:nth-child(2){
    background: palegreen;
    transform: translateX(-100px) rotateY(90deg);
   }
   li:nth-child(3){
    background: paleturquoise;
    transform: translateX(100px) rotateY(90deg);
   }
   li:nth-child(4){
    background: papayawhip;
    transform: translateY(-100px) rotateX(90deg);
   }
   li:nth-child(5){
    background: palevioletred;
    transform: translateY(100px) rotateX(90deg);
   }
   li:nth-child(6){
    background: palegoldenrod;
    transform: translateZ(-100px);
   }
   
   ul:hover {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
   }
  </style>
 </head>
 <body>
   <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
 </body>
</html>

Nikki_0720

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3制作立方体

通过本周逆战班的学习，我们来复习一下如何使用css3制作一个立方体。首先我们进行分析：既然是立方体，顾名思义拥有六个相同的面，所以我们需要制作6个相同的元素并分别使它们旋转形成一个正方体。这里我选择使用无序列表ul、li制作。在设计正方体之前，我们需要先定义全局样式，取消它们的margin、padding值以及li的列表属性：*{ margin: 0; padding: 0...
复制链接

扫一扫