web前端开发—进阶css（空间转换）

最新推荐文章于 2023-08-12 23:45:51 发布

前端挣扎的鱼

最新推荐文章于 2023-08-12 23:45:51 发布

阅读量296

点赞数

分类专栏： web前端文章标签： css html css3

web前端专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了CSS3中的空间转换技术，包括位移、旋转、透视效果以及立体呈现。通过transform属性实现元素在3D空间的位移、旋转和缩放，利用perspective属性创建透视效果，使元素呈现出近大远小的视觉感受。此外，文章还展示了如何通过transform-style:preserve-3d创建立体图形，并利用这一技术实现3D导航栏的效果。最后，提到了空间缩放的应用。

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

空间转换：

定义：空间转换也叫3D转换，属性：transform

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同（z轴正方向是指向自己）。

空间位移：

目标：使用translate实现元素空间位移效果

语法： transform: translate3d(x, y, z); transform: translateX(值); transform: translateY(值); transform: translateZ(值);

取值（正负均可）：像素单位数值；百分比

代码：（z轴空间位移暂时看不出效果）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>空间位移</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;   /* 居中 */
      background-color: pink;
      transition: all 0.5s;
    }

   .box:hover {
    /*  transform: translate3d(50px, 100px, 200px); */
      transform: translateX(100px);
      transform: translateY(100px);   /* 单独控制一个方向 垂直移动向下100px */
      transform: translateZ(100px);  
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

透视效果：

目标：使用perspective属性实现透视效果

思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？

答：近大远小、近清楚远模糊。

思考：默认情况下，为什么无法观察到Z轴位移效果？

答：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果。

属性（添加给父级）：perspective: 值；取值：像素单位数值，数值一般在800 – 1200。

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果。

代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
	 /* 给父级添加perspective属性,数值一般在800 – 1200 ，box的父级是body*/
    body {
		perspective: 1000px;
      /* perspective: 200px;   人眼到屏幕的距离200px   近大 */
     /* perspective: 10000px;   人眼到屏幕的距离10000px   看图变化很小 */
	 
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;    /* 居中 */
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
     transform: translateZ(200px);  /* 只观察z轴的移动  近大远小 */
      /* transform: translateZ(-200px); */  /* 近小远大 */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

空间旋转——X/Y/Z轴：

目标：使用rotate实现元素空间旋转效果

语法： transform: rotateZ(值); transform: rotateX(值); transform: rotateY(值);

拓展：rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度；x，y，z 取值为0-1之间的数字。

空间旋转-Z轴代码：

<!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>空间旋转-Z轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box img:hover {
            transform: rotateZ(360deg);  /* 用户视线的方向 */
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

空间旋转-X轴代码：

<!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>空间旋转-X轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateX(60deg);
             /* transform: rotateX(-60deg); */
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

X轴

空间旋转-Y轴代码：

<!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>空间旋转-Y轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateY(60deg);
             /* transform: rotateY(-60deg); */  /* 逆时针转动 */
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

立体呈现：

目标： 使用transform-style: preserve-3d呈现立体图形

思考：使用perspective透视属性能否呈现立体图形？

答：不能，perspective只增加近大远小、近实远虚的视觉效果。

实现方法：添加 transform-style: preserve-3d; 使子元素处于真正的3d空间；默认值flat，表示子元素处于2D平面内呈现。

呈现立体图形步骤：1. 盒子父元素添加transform-style: preserve-3d； 2. 按需求设置子盒子的位置（位移或旋转）。

注意： 空间内，转换元素都有自已独立的坐标轴，互不干扰。

代码：

<!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>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            /* 向我走近200px */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

3D导航：

目标：使用立体呈现技巧实现3D导航效果

思考：绿色和橙色盒子是如何摆放的？

Ø 搭建立方体

Ø 绿色盒子是立方体的前面

Ø 橙色盒子是立方体的上面

结论： 绿色和橙色部分共需要3个标签：1个父级标签 ; 绿色和橙色共2个标签（子级）

实现思路：

1. 搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面。

（1） li标签：添加立体呈现属性transform-style: preserve-3d；添加旋转属性（为了便于观察效果，案例完成后删除即可）

（2）a标签：调节位置

调节a标签的位置； a标签定位（子绝父相）；英文部分添加旋转和位移样式；中文部分添加位移样式。

2. 添加hover状态旋转切换效果

（1）过渡效果：鼠标滑过li，添加空间旋转样式；li添加过渡属性。

注意：案例完成后，删除li的旋转样式。

3D导航栏：

<!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>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;

            /* 旋转: 让大家在写代码的过程中看到立体盒子 */
            /* transform: rotateX(-20deg) rotateY(30deg); */

            /* 测试缩放效果 */
            /* transform: scale3d(0.5, 1.1, 2); */
        }

        .navs li a {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        
        .navs li a:last-child {
            background-color: orange;
            /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
            transform: rotateX(90deg) translateZ(20px);
        }

        /* li:hover 立方体旋转 */
        .navs li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>

3d导航

空间缩放：

目标：使用scale实现空间缩放效果

语法：transform: scaleX(倍数); transform: scaleY(倍数); transform: scaleZ(倍数); transform: scale3d(x, y, z);

结合3D导航的代码：

<!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>
		/* 清空默认样式 */
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
           position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;

            /* 旋转: 让大家在写代码的过程中看到立体盒子 */
            /* transform: rotateX(-20deg) rotateY(30deg);
 */
            /* 测试缩放效果 */
            transform: scale3d(0.5, 1.1, 2);  /* 水平缩小0.5倍,垂直放大1.1倍,z轴放大2倍 */
        }

        .navs li a {
            position: absolute;
            left: 0;
            top: 0;
            display: block;  /* 块标签 */
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
            background-color: green;
           transform: translateZ(20px);
        }
        
        .navs li a:last-child {
            background-color: orange;
            /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
           transform: rotateX(90deg) translateZ(20px);
        }

        /* li:hover 立方体旋转 */
        .navs li:hover {
          transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>