纯用CSS来实现3D立方体旋转效果

最新推荐文章于 2024-04-11 12:19:59 发布

1983丶

最新推荐文章于 2024-04-11 12:19:59 发布

阅读量2k

点赞数 5

分类专栏： CSS 文章标签：纯用CSS来实现3D立方体旋转效果

本文链接：https://blog.csdn.net/qq_44958875/article/details/95929984

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这次用纯CSS来实现3D立方体旋转效果效果如下（可以想象成一个旋转的立方体）
在这里插入图片描述

HTML部分

首先创建一个ul标签在其ul标签下的6个li标签相当于正方体的6个面

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

CSS部分

ul {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    margin: 100px auto;
    animation: run 5s infinite linear;
  }

在父级ul 标签中加入

transform-style: preserve-3d;

使被转换的子元素保留其 3D 转换；

animation: run 5s infinite linear;

用animation将动画与ui标签绑定 infinite实现无限次重复 linear实现线性渐变

在子级li标签中设置宽度和长度并且使用绝对定位来实现一个立方体搭建

 position: absolute;

如果不使用的话会错乱无法形成立方体
在这里插入图片描述

在li标签中

li{
    list-style: none;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
  }

用li:first-child 来指定选择属于其父元素的首个子元素的每个 p元素

但第二个开始要用nth-child(2)直到最后一个可以使用nth-child()中间为最后一个的数字或者last-child 第一个必须用firts-child

  li:first-child {
    background-image: url("./image/20180811213311_tdald.gif");
    background-size: 100%;
    transform: translateZ(100px);
  }
  
  li:nth-child(2) {
    background-image: url("./image/毕业2.jpg");
    background-size: 100%;
    transform: translateY(-100px) rotateX(90deg);
  }
  
  li:nth-child(3) {
    background-image: url("./image/A.jpg");
    background-size: 100%;
    transform: translateY(100px) rotateX(90deg);
  }
  
  li:nth-child(4) {
    background-image: url("./image/A.jpg");
    background-size: 100%;
    transform: translateX(-100px) rotateY(90deg);
  }
  
  li:nth-child(5) {
    background-image: url("./image/L.jpg");
    background-size: 100%;
    transform: translateX(100px) rotateY(90deg);
  }
  
  li:nth-child(6) {
    background-image: url("./image/A2.jpg");
    background-size: 100%;
    transform: translateZ(-100px);
  }

然后我们有6面每一面我们的transform所定义的位置在三维空间中不一样
因为translateZ可以定义3D转换而translateX和Y定义转换，只是用 X 轴的值，或者Y轴的值所以单用了translateX或者Y要加rotateX或者Y定义在X轴和Y轴上的3D转换
在li标签上6个面用background-image来定义背景图片

最后需要在CSS3中创建动画我们要用到**@keyframes**


  @keyframes run {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
  
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
  }

上诉中我们实现了从刚开始0%到旋转一周100%的时候方块的转动的X Y周的3D转换；

最后附上完整CSS代码


ul {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  margin: 100px auto;
  animation: run 5s infinite linear;
}

li {
  list-style: none;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
}

li:first-child {
  background-image: url("./image/20180811213311_tdald.gif");
  background-size: 100%;
  transform: translateZ(100px);

}

li:nth-child(2) {
  background-image: url("./image/毕业2.jpg");
  background-size: 100%;
  transform: translateY(-100px) rotateX(90deg);
}

li:nth-child(3) {
  background-image: url("./image/A.jpg");
  background-size: 100%;
  transform: translateY(100px) rotateX(90deg);
}

li:nth-child(4) {
  background-image: url("./image/A.jpg");
  background-size: 100%;
  transform: translateX(-100px) rotateY(90deg);
}

li:nth-child(5) {
  background-image: url("./image/L.jpg");
  background-size: 100%;
  transform: translateX(100px) rotateY(90deg);
}

li:nth-child(6) {
  background-image: url("./image/A2.jpg");
  background-size: 100%;
  transform: translateZ(-100px);
}

@keyframes run {
  0% {
      transform: rotateX(0deg) rotateY(0deg);
  }

  100% {
      transform: rotateX(360deg) rotateY(360deg);
  }
}

注：重点在于transfor中3D转换的数值调整随着正方形体积正大每一个面的增大数值也会有所不同

1983丶

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
纯用CSS来实现3D立方体旋转效果

这次用纯CSS来实现3D立方体旋转效果效果如下（可以想象成一个旋转的立方体）HTML部分首先创建一个ul标签在其ul标签下的6个li标签相当于正方体的6个面<body> <ul> <li></li> <li></li> <li></li...
复制链接

扫一扫