transform实现简单3D立体正方体旋转

最新推荐文章于 2023-09-20 18:37:02 发布

追逐梦想之路_随笔

最新推荐文章于 2023-09-20 18:37:02 发布

阅读量1k

点赞数 1

分类专栏： CSS/CSS3 文章标签： css3

本文链接：https://blog.csdn.net/qq_44472790/article/details/121594660

版权

CSS/CSS3 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

初始效果图
在这里插入图片描述

html

 <div class="box-parent">
      <span class="box-children">1</span>
      <span class="box-children">2</span>
      <span class="box-children">3</span>
      <span class="box-children">4</span>
      <span class="box-children">5</span>
      <span class="box-children">6</span>
    </div>

css

<style>
      .box-parent {
        height: 200px;
        width: 200px;
        margin: 200px auto;
        /* 开启3d模式 */
        transform-style: preserve-3d;
        /* 是否近身效果和距离 */
        perspective: 600px;
        /*默认旋转角度*/
        transform: rotateY(45deg) rotateX(45deg);
        position: relative;
        transition: 2s;
      }

      .box-parent:hover {
        transform: rotateY(360deg) rotateX(90deg);
      }

      .box-children {
        width: 200px;
        height: 200px;
        background: rgb(243, 225, 225);
        border: 1px solid blue;
        /*运动时间*/
        /* transition: 1s; */
        position: absolute;
        opacity: 0.6;
        font-size: 30px;
        text-align: center;
        line-height: 200px;
        color: #000;
      }

      /* .box-children:hover { */
      /* 
           perspective: 100px; 代表贴脸100px间距

           translateX 沿着x轴移动 200px代表向右边移动 -200px向左边移动
           translateY 沿着y轴移动 200px代表向下移动 -200px向上边移动
           translateZ 沿着z轴移动 200px代表向前移动 -200px向后边移动

           rotateY 90deg代表沿着y轴向左上旋转90度 -90deg代表沿着y轴向右上边旋转90度 
           rotateX  90deg沿着x轴下上方旋转90度 -90deg 沿着x轴右上方旋转90度
           rotateZ  90deg沿着Z轴右边旋转90度 -90deg 沿着Z轴左边旋转90度
          */
      /* transform: rotateZ(90deg);
      } */
      /* 左边面 */
      .box-parent span:nth-child(1) {
        transform: translateZ(100px);
        background: rgb(209, 93, 93);
      }
      /* 后面面 */
      .box-parent span:nth-child(2) {
        transform: rotateY(90deg) translateZ(100px);
        background: rgb(143, 224, 143);
      }
      /* 右边面 */
      .box-parent span:nth-child(3) {
        transform: rotateY(180deg) translateZ(100px);
        background: rgb(223, 179, 219);
      }
      /* 前面面 */
      .box-parent span:nth-child(4) {
        transform: rotateY(270deg) translateZ(100px);
        background: rgb(235, 67, 221);
      }
      /* 最上面 */
      .box-parent span:nth-child(5) {
        transform: rotateX(90deg) translateZ(100px);
        background: rgb(241, 238, 33);
      }
      /* 最下面 */
      .box-parent span:nth-child(6) {
        transform: rotateX(-90deg) translateZ(100px);
        background: rgb(129, 129, 125);
      }
    </style>