css3基础3D小盒子笔记

最新推荐文章于 2022-03-13 22:58:52 发布

JunXian9102

最新推荐文章于 2022-03-13 22:58:52 发布

阅读量410

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/smiple9102/article/details/72459106

版权

css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

3d小盒子：
这里写图片描述
记忆点：
① perspective:500px; 透视效果。
显示3d透视效果，需要配合父元素添加transform-style:preserve-3d;
在旋转时才能在3d空间变换显示。
②x轴，y轴，z轴的旋转后的移动，始终是根据自身的Z轴移动。
transform:rotateY(0deg) translateZ(100px);

<style>
  body{
    /* 单独设置了perspective属性只是让这个标签元素在2d的平面上展示3d效果，
    如果hover里设置了旋转，就是进入了3D效果空间，看不到3D变换效果。
    问题解决：将3d变换的 父元素 添加一个transform-style：属性 即可看到3d的变换效果。 */
    perspective:500px;
  }
.box{
  width: 200px;
  height: 200px;
  margin: 100px auto;
  border: 1px solid gray;
  position: relative;
 transition:all 5s;
 transform-style:preserve-3d;/* 此处添加给3d变换的 父元素。 */

  }
.box .item{
  width: 100%;
  height: 100%;
  font-size: 150px;
  text-align: center;
  line-height: 200px;
  font-weight: 900;
  position: absolute;
  }
.item:nth-child(1){
  background-color: orange;
  transform:rotateY(0deg) translateZ(100px);
}
.item:nth-child(2){
  background-color: red;
  transform:rotateY(180deg) translateZ(100px);
}
.item:nth-child(3){
  background-color: yellowgreen;
   transform:rotateY(90deg) translateZ(100px);
}
.item:nth-child(4){
  background-color: yellow;
  transform:rotateY(-90deg) translateZ(100px);
}
.item:nth-child(5){
  background-color: skyblue;
  transform:rotateX(-90deg) translateZ(100px);
}
.item:nth-child(6){
  background-color: pink;
  transform:rotateX(90deg) translateZ(100px);
}
.box:hover{
  transform:rotateX(450deg) rotateY(450deg);
}
</style>
</head>
<body>
<!--   div.box>div.item$*4  -->
 <div class="box">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
   <div class="item">6</div>
 </div>
</body>

JunXian9102

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3基础3D小盒子笔记

3d小盒子：记忆点： ① perspective:500px; 透视效果。显示3d透视效果，需要配合父元素添加transform-style:preserve-3d; 在旋转时才能在3d空间变换显示。 ②x轴，y轴，z轴的旋转后的移动，始终是根据自身的Z轴移动。 transform:rotateY(0deg) translateZ(100px);<style> body{
复制链接

扫一扫

专栏目录