css3 3D

最新推荐文章于 2024-12-06 20:10:17 发布

weixin_30340819

最新推荐文章于 2024-12-06 20:10:17 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hexiaozhen/p/6385969.html

本文介绍CSS3中3D变换的基本概念，包括X轴、Y轴和Z轴的旋转操作，并通过两个实例——翻牌效果和翻页效果，详细展示了如何利用rotateX()、rotateY()及transform-style等属性实现丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3 3D总结

1.学习css3 3D首先要知道 X轴 Y轴 Z轴对应的方向看下面的图片吧。

2.大家需要了解下这几个属性rotateX()、rotateY()、rotateZ();

rotateX()、rotateY()、rotateZ()
rotateX():对应的是3D的X轴，rotateX(45deg)是在X轴上旋转45度。
rotateY():对应的是3D的Y轴，rotateY(45deg)是在Y轴上旋转45度。
rotateZ():对应的是3D的Z轴，rotateZ(45deg)是在Z轴上旋转45度。

3.写的时候我们还有舞台和容器。分辨是perspective:，transform- style: preserve-3d;

perspective: 800px;对于舞台要加个视距，比如是800像素：
transform-style: preserve-3d;对于容器要加3D视图要设置在父元素上：

4.下面给大家分享我做的案例。

翻牌

html代码

<div class="b">
    <div class="box"><img src="img/zi1.png" alt=""></div>
    <div class="box1"><img src="img/zi2.png" alt=""></div>
</div>

css样式

 .b{
    width: 300px;
      height: 300px;
      perspective: 800px; //视距
      transform-style: preserve-3d; //3d空间
      transform: rotateY(180deg);
      position: relative;
      margin: 50px auto;
      transition: 2s;
    }
    .box{
      width: 300px;
      height: 300px;
      background-color: red;
      margin: 0 auto;
      text-align: center;
      line-height: 300px;
      position: absolute;
      font-size: 100px;
      transform: rotateY(180deg);
      backface-visibility: hidden; //隐藏背面
    }
    .box1{
      width: 300px;
      height:300px;
      background-color: yellow;
      margin: 0 auto;
      font-size: 100px;
      text-align: center;
      line-height: 300px;
      position: absolute;
      transform: rotateY(0deg);
    }
    img{
      width: 100%;
      height: 100%;
    }
    .b:hover{
      transform: rotateY(0deg);
    }

翻页

html代码

      <div id="box" class="box">
      <div id="box1" class="box1">
          <div class="mian"><img src="img/img1.jpg" alt=""></div>
          <div class="mian"><img src="img/img2.jpg" alt=""></div>
          <div class="mian"><img src="img/img3.jpg" alt=""></div>
          <div class="mian"><img src="img/img4.jpg" alt=""></div>
          <div class="mian"><img src="img/img5.jpg" alt=""></div>
          <div class="mian"><img src="img/img6.jpg" alt=""></div>
      </div>
  </div>
  <div class="btn">
    <input id="btn1" type="button" name="" value="下">
    <input id="btn2" type="button" name="" value="上">
  </div>

css样式

body{
  background: #7557d0;
}
.box{
  perspective: 800px;
}
.box1{
  width:300px;
  height: 300px;
  border: 1px solid #ccc;
  transform-style: preserve-3d;
  margin:50px auto;
  position: relative;
}
.mian{
  width:300px;
  height:300px;
  background: #1b46de;
  text-align: center;
  line-height:300px;
  font-size:50px;
  position: absolute;
  transform-origin: bottom;
  backface-visibility: hidden;
  transition: 1s;
}
img{
  width: 100%;
  height: 100%;
}
.mian:nth-of-type(6){
  transform: rotateX(0deg);
}
.btn{
  margin: 0 auto;
  width: 80px;
}

js代码

var box1 = document.getElementById('box1');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var box = box1.getElementsByTagName('div');
var currPage=6;
btn1.onclick=function(){
  if(currPage==1)return;
  box[currPage-1].style.transform="rotateX(-90deg)";
  currPage--;
  box[currPage-1].style.transform="rotateX(0deg)";
}
btn2.onclick=function(){
  if(currPage==6)return;
  box[currPage-1].style.transform="rotateX(0deg)";
  currPage++;
  box[currPage-1].style.transform="rotateX(0deg)";
}

)