CSS 3D变形形式：旋转、空间位移

2023-08-1109:52:50网页制作Comments836 views字数 2726阅读模式
CSS 3D变形形式：旋转、空间位移文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

今天介绍 两种 3D变形的形式：3D旋转、空间位移。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

3D旋转

在上一节 2D变形中， 我们用到了 transform  属性。那么在3D旋转中同样还是这个属性（怎么老是它）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

用rotateX() 函数来给 transform  属性赋值，即可实现元素标签绕X（横）轴3D旋转。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

// 绕横轴（盒子X轴中心线 旋转 30 度）transform: rotateX(30deg)

用rotateY() 函数来给 transform  属性赋值，即可实现元素标签绕Y（横）轴3D旋转。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

// 绕纵轴（盒子Y轴中心线 旋转 30 度）transform: rotateY(30deg)

用rotateZ() 函数来给 transform  属性赋值，即可实现元素标签绕Z（竖）轴3D旋转。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

// 绕纵轴（盒子Y轴中心线 旋转 30 度）transform: rotateZ(30deg)

如果只用单独的transform 和 一个空间旋转函数 来做，可能视觉上并不能达到要求。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

举例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

CSS 3D变形形式：旋转、空间位移文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

红色部分就是 box1 , 其实它是一个正方形，当我们 设置了 X轴旋转后，它看起来像一个 长方形， 其实这是因为 旋转造成的， 而网页又是一个平面，我们看不到旋转到里面的那一部分，所以呈现出来的就是一个长方形。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />    <title>Document</title>
    <style>      * {        margin: 0;        padding: 0;      }      .box1 {        width: 200px;        height: 200px;        background-color: red;        transform: rotateX(30deg);      }      .parentBox {        width: 200px;        height: 200px;        border: 1px orange solid;        margin: auto;      }</style>  </head>  <body>    <div class="parentBox">      <div class="box1"></div>    </div>  </body></html>

如果想看出是旋转的样子，还需要一个属性配合, 那就是 perspective。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

perspective

perspective 表示 观察者（人）到 平面元素的 距离。值越大，表示距离平面元素越远。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

配合 transform  如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

CSS 3D变形形式：旋转、空间位移文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

举例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

实现 子元素 沿X轴旋转 30度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

CSS 3D变形形式：旋转、空间位移文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />    <title>3D旋转示例</title>
    <style>      * {        margin: 0;        padding: 0;      }      .box1 {        width: 200px;        height: 200px;        background-color: red;        transform: rotateX(30deg);      }      .parentBox {        width: 200px;        height: 200px;        border: 2px green solid;        margin: auto;        margin-top: 10px;        perspective: 300px;      }</style>  </head>  <body>    <div class="parentBox">      <div class="box1"></div>    </div>  </body></html>

元素可以同时绕多个轴旋转，例如  绕X轴旋转30度，绕Y轴旋转30度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

CSS 3D变形形式：旋转、空间位移文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />    <title>3D旋转示例1</title>
    <style>      * {        margin: 0;        padding: 0;      }      .box1 {        width: 200px;        height: 200px;        background-color: red;        transform: rotateX(30deg) rotateY(30deg);      }      .parentBox {        width: 200px;        height: 200px;        border: 2px green solid;        margin: auto;        margin-top: 10px;        perspective: 300px;      }</style>  </head>  <body>    <div class="parentBox">      <div class="box1"></div>    </div>  </body></html>

空间位移

当元素发生 3D旋转后，就可以进行空间位移。注意 一定要是发生旋转后，才可以看出位移效果，否则就和2D平面位移没啥区别了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

用 translateX()、 translateY()、translateZ()  给 transform 赋值，就可以分别 发生三个方向X轴，Y轴，Z轴方向的移动。三个位移函数接收参数支持长度单位。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

// 发生3D旋转后， 才能看出3D效果// 可以同时发生多个方向位移transform: rotateX(30deg) translateX(30px) translateY(30px);

举例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

一个元素， 在X轴方向发生30px距离的位移， 在Y轴方向发生30px的位移。效果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

CSS 3D变形形式：旋转、空间位移文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>空间位移</title>    <style>      p {        width: 200px;        height: 200px;        background-color: orange;      }      .box1 {        width: 202px;        height: 202px;        border: 1px solid black;        perspective: 300px;      }
      .box1 p {        transform: rotateX(30deg) translateX(30px) translateY(30px);      }</style>  </head>  <body>    <div class="box1">      <p></p>    </div>  </body></html>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/53551.html
  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/zhizuo/53551.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定