【CSS】3d平移、旋转、缩放

芒果Cake

已于 2022-12-13 18:38:56 修改

阅读量544

点赞数

分类专栏： CSS 文章标签： css 3d css3

于 2022-12-02 22:44:19 首次发布

本文链接：https://blog.csdn.net/huangwfu/article/details/128155872

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

3d变换：平移、旋转、缩放

3d变换：平移、旋转、缩放

坐标
2d: x y
3d: x y z

x轴称为左右+向右 -向左
y轴称为上下+向下 -向上
z轴称为前后+向前 -向后

3d平移

语法：transform
translatez() +向前 -向后
translate3d(x,y,z）

3d环境

3d环境：加给父元素以及以上的元素
- 默认值是2d环境
- transform-style: preserve-3d;

3d眼镜

3d眼镜：加给父元素以及以上的元素
- 默认值是none
- 透视景深
- 推荐写：1000px-2000px
- perspective: 1000px;

设置元素的透视效果

transform:perspective()

设置给当前元素
里面只能写数值

 <style>
    body {
      height: 600px;
      /* 3d环境 */
      transform-style: preserve-3d;
      /* 3d眼镜 */
      perspective: 1000px;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: cyan;
      position: fixed;
      left: 30%;
      top: 30%;
      transition: all 5s linear;
      font-size: 40px;
    }

    body:hover div {
      transform: translateZ(200px);
      transform: translateZ(-200px);
      transform: translate3d(100px, 100px, -300px);
    }
  </style>
  <div>文本文本</div>

3d旋转

transform

rotate()
rotateZ()
rotateX()
rotateY()

rotate3d(x,y,z,3odeg)

x,y,z 写 0-1之间
0表示不旋转
1表示旋转
也可以写小数,不推荐

<style>
    body {
      height: 600px;
      /* 3d环境 */
      transform-style: preserve-3d;
      /* 3d眼镜 */
      perspective: 1000px;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: cyan;
      position: fixed;
      left: 30%;
      top: 30%;
      transition: all 5s linear;
      font-size: 40px;
    }

    body:hover div {
      /* 
      X:+里 -外
      Y:+右 -左
      Z:+顺 -逆
        rotate()=rotateZ()
      */
      transform: rotateX(360deg);
      transform: rotateX(-360deg);
      transform: rotateY(360deg);
      transform: rotateY(-360deg);
      transform: rotateZ(360deg);
      transform: rotateZ(-360deg);
      transform: rotate(360deg);
      transform: rotate(-360deg);
      transform: rotate3d(1, 0, 0, 90deg);
    }
  </style>

3D缩放

transform:

scalez()
scale3d(x,y,z)

注意: 单独写没有用，必须结合其他变形函数一起使用，而且要写在其他变形函数后面

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    body {
      height: 600px;
    }

    /* ul 立方体 */
    ul {
      width: 300px;
      height: 300px;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -150px;
      transform-style: preserve-3d;
      /* perspective: 1000px; */
      transition: all 10s;
    }

    /* li 6个面 */
    ul li {
      width: 300px;
      height: 300px;
      font-size: 40px;
      color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0.5;
    }

    /* 前 */
    ul li:nth-child(1) {
      background-color: red;
      transform: translateZ(150px);
    }

    /* 上 */
    ul li:nth-child(2) {
      background-color: orange;
      transform: translateY(-150px) rotateX(90deg);
    }

    /* 下 */
    ul li:nth-child(3) {
      background-color: yellow;
      transform: translateY(150px) rotateX(-90deg);
    }

    /* 左 */
    ul li:nth-child(4) {
      background-color: green;
      transform: translateX(-150px) rotateY(-90deg);
    }

    /* 右 */
    ul li:nth-child(5) {
      background-color: cyan;
      transform: translateX(150px) rotateY(90deg);
    }

    /* 后 */
    ul li:nth-child(6) {
      background-color: purple;
      transform: translateZ(-150px) rotateY(180deg);
    }

    /* 最后,旋转起来看效果 */
    body:hover ul {
      transform: rotate3d(0, 1, 0, 360deg) scaleZ(2);
      transform: rotate3d(0, 1, 0, 360deg) scaleZ(0.1);
      transform: rotate3d(0, 1, 0, 360deg) scale3d(0.2, 1.2, 0.5);
    }
  </style>
</head>
<ul>
    <li>前</li>
    <li>上</li>
    <li>下</li>
    <li>左</li>
    <li>右</li>
    <li>后</li>
</ul>

💡代码执行结果
请添加图片描述

芒果Cake

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS】3d平移、旋转、缩放

3d: x y z3d环境3d眼镜设置元素的透视效果3d旋转transformrotate3d(x,y,z,3odeg)3D缩放scalez()scale3d(x,y,z)注意: 单独写没有用，必须结合其他变形函数一起使用，而且要写在其他变形函数后面💡代码执行结果
复制链接

扫一扫