还不知道transform 3D转换怎么用？看这个就够了

优雅哥cc

已于 2022-06-19 13:36:09 修改

阅读量9.2k

点赞数 18

分类专栏： CSS3学习笔记文章标签： css3 transform 3d rotate rotate3d

于 2021-03-21 21:11:06 首次发布

本文链接：https://blog.csdn.net/weixin_43742708/article/details/114962450

版权

CSS3学习笔记专栏收录该内容

12 篇文章 12 订阅

订阅专栏

文章目录

一、认识3D
- 1.1 三维坐标系
二、3D移动 translate3d
- 2.1 透视 perspective
三、3D旋转
四、3D呈现 transform-style
五、案例
- 5.1 3D导航栏
- 5.2 旋转木马

一、认识3D

我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子
有什么特点

近大远小。
物体后面遮挡不可见

当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。

在这里插入图片描述

1.1 三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的

X 轴：水平向右注意：X右边是正值，左边是负值
Y 轴：垂直向下注意：y下面是正值，上面是负值
Z 轴：垂直屏幕注意：往外面是正值，往里面是负值

在这里插入图片描述

3D转换我们主要学习工作中最常用的3D位移和3D旋转
主要知识点

3D位移：translate3d(xy,z)
3D旋转： rotate3d(xy,)
透视： perspective
3D呈现： transfrom- style

二、3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

translform: translateX(100px):仅仅是在x轴上移动
translform: translateY(100px):仅仅是在Y轴上移动
translform: translateZ(100px):仅仅是在Z轴上移动(注意： translateZ一般用px作单位)
transform: translate3d(x,y,z):其中x、y、z分别指要移动的轴的方向的距离

注意：

translateZ 沿着Z轴移动
translateZ 后面的单位一般跟px
translateZ(100px)向外移动100px（向我们的眼睛来移动的）
目前看不到效果，需要配合透视使用

语法：

transform: translateX(100px) translateY(100px) translateZ(100px); 
transform: translate3d(100px,100px,100px);

2.1 透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的

如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

在这里插入图片描述

透视写在被观察元素的父盒子上面的
d:就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z:就是z轴，物体距离屏幕的距离，轴越大（正值）我们看到的物体就越大

translform: translateZ(100px):仅仅是在Z轴上移动
有了透视，就能看到 translateZ引起的变化了
在这里插入图片描述

三、3D旋转

3D旋转指可以让元素在三维平面内沿看x轴，y轴，z轴或者自定义轴进行旋转。
语法

transform: rotate(45deg):沿着x轴正方向旋转45度
transform: otatey(45deg):沿着y轴正方向旋转45deg
transform: rotate(45deg):沿着Z轴正方向旋转45deg
transform: rotate3d( x, y, z, deg):沿着自定义轴旋转deg为角度（了解即可）

3.1 rotateX

在这里插入图片描述

对于元素旋转的方向的判断我们需要先学习个左手准则
左手准则

左手的手拇指指向x轴的正方向
其余手指的弯曲方向就是该元素沿着X轴旋转的方向

3.2 rotateY

在这里插入图片描述

左手准则

左手的手拇指指向y轴的正方向
其余手指的弯曲方向就是该元素沿着/轴旋转的方向（正值

3.3 rotateZ

在这里插入图片描述

3.4 rotate3d

transform: rotate3d(xyz,deg):沿着自定义轴旋转deg为角度（了解即可）
xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

/* 等同于 rotateX(45deg) */
/* transform: rotate3d(1,0,0,45deg); */

/* 等同于 rotateY(45deg) */
/* transform: rotate3d(0,1,0,45deg); */

/* 等同于:transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); */
transform: rotate3d(1,1,1,45deg);

矢量旋转：
transform:rotate3d(1,1,0,45deg)

在这里插入图片描述

四、3D呈现 transform-style

先来看一下以下代码：

<style>
  body{
    perspective: 500px;
  }
  .box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-top: 200px;
    position: relative;
    transition: all 2s;
    /* transform-style: preserve-3d; */
  }
  .box:hover{
    transform: rotateY(60deg);
  }
  .box div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: teal;

  }
  .box div:last-child{
    background-color: pink;
    transform: rotateX(60deg);
  }
</style>
<body>
  <div class="box">
    <div></div>
    <div></div>
  </div>
</body>

旋转的效果：
在这里插入图片描述
可以发现我们的子元素的3D效果没有了，又变成了二维平面的了，怎么办呢？这时候就需要我们的 transform-style登场了。

控制子元素是否开启三维立体环境。。

transform- style:fiat子元素不开启3d立体空间默认的
transform- style: preserve-3d,子元素开启立体空间

代码写给父级，但是影响的是子盒子
这个属性很重要，后面必用

接下来在 .box 加上：transform-style: preserve-3d;

效果：
在这里插入图片描述

五、案例

5.1 3D导航栏

效果：
在这里插入图片描述

<style>
   * {
     margin: 0;
     padding: 0;
   }
   ul {
     margin: 100px ;
   }
   ul li {
     width: 120px;
     height: 35px;
     list-style: none;
     perspective: 500px;
     float: left;
     margin: 0 5px;
   }
   .box {
     width: 100%;
     height: 100%;
     position: relative;
     transform-style: preserve-3d;
     transition: all .3s;
   }
   .box:hover{
     transform: rotateX(90deg);
   }
   .front,
   .bottom {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   .front{
     background-color: pink;
     transform: translateZ(17.5px);
   }
   .bottom{
     background-color: teal;
     /* transform-origin: center bottom; */
     transform:translateY(17.5px) rotateX(-90deg);
   }
 </style>
<body>
  <ul>
    <li>
      <div class="box">
        <div class="front">天行健</div>
        <div class="bottom">地势坤</div>
      </div>
    </li>
    <li>
      <div class="box">
        <div class="front">天行健</div>
        <div class="bottom">地势坤</div>
      </div>
    </li>
	...
  </ul>
</body>

5.2 旋转木马

效果：

在这里插入图片描述

<style>
  body{
    perspective: 800px;
    background-color: #ccc;
  }
  section {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 350px auto;
    transform-style: preserve-3d;
    animation: rotate 15s infinite linear;
    background: url(../media/pig.jpg) no-repeat;
  }
  section div{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* 添加动画 */
  }
  section div img{
    width: 300px;
    height: 200px;

  }
  section:hover{
    animation-play-state: paused;
  }
  @keyframes rotate{
    0%{
      transform: rotateY(0);
    }
    100%{
      transform: rotateY(360deg);
    }
  }
  section div:nth-child(1){
    transform: translateZ(300px);
  }
  section div:nth-child(2){
    /* transform:translateX(300px) rotateY(60deg); */
    /* 先旋转 再移动 */
    transform:rotateY(60deg) translateZ(300px);
  }
  section div:nth-child(3){
    transform:rotateY(120deg) translateZ(300px);
  }
  section div:nth-child(4){
    transform:rotateY(180deg) translateZ(300px);
  }
  section div:nth-child(5){
    transform:rotateY(240deg) translateZ(300px);
  }
  section div:nth-child(6){
    transform:rotateY(300deg) translateZ(300px);
  }
</style>
<body>
  <section>
    <div><img src="../media/1.jpg" alt=""></div>
    <div><img src="../media/2.jpg" alt=""></div>
    <div><img src="../media/3.jpg" alt=""></div>
    <div><img src="../media/4.jpg" alt=""></div>
    <div><img src="../media/5.jpg" alt=""></div>
    <div><img src="../media/6.jpg" alt=""></div>
  </section>
</body>