3D立体书架切换效果(一)

最新推荐文章于 2023-12-12 21:13:32 发布

阿新学编程

最新推荐文章于 2023-12-12 21:13:32 发布

阅读量400

点赞数

文章标签： 3d css css3

本文链接：https://blog.csdn.net/weixin_49380482/article/details/125236784

版权

最终效果图

第一步：用css制作书本立体效果

html代码如下

四个面 54037060

<div class="cuboid">
        <div class="right">右</div>
        <div class="left">左</div>
        <div class="back">后</div>
        <div class="front">前</div>
</div>

scss代码（注意是scss不是css）

* {
  padding: 0;
  margin: 0;
}
/*
*scss代码（注意是scss不是css）
*/
// 长方体模型
//配置文件
$width: 540px;
$height: 370px;
$depth: 60px;


.cuboid {
  width: $depth;
  height: $height;
  transform-style: preserve-3d;
  /* 使得所有子元素在3D空间中呈现 */
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;		//侧面的高度相同
  }
  // 背面
  .back{
    width: $depth;
    transform:  translateZ(-$width/2) rotateY(180deg);
      background-color: aqua;
      }
  //前面
  .front{
    width: $depth;
    transform:  translateZ($width/2);
    background-color: red;
  }
  // 左面
  .left{
    width:$width;
    transform:  translateX(-$width/2) rotateY(-90deg);
      background-color: rgb(3, 235, 235);
      }
  // 右面
  .right{
    width:$width;
    transform:  translateX(-$width/2+$depth) rotateY(90deg);
      background-color: rgb(235, 235, 3);
      }
}