20231030-黑马web进阶-空间转换

最新推荐文章于 2024-06-20 15:06:48 发布

ぃ咔哇依°ヽ

最新推荐文章于 2024-06-20 15:06:48 发布

阅读量84

点赞数

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

本文链接：https://blog.csdn.net/qq_44887198/article/details/134119682

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章目录

空间位移
空间旋转
立体呈现transform-style: preserve-3d;
3D导航
空间缩放

空间位移

语法：
transform:translate3d(x,y,z);
transform.translateX(值);
transform.translateY(值);
transform.translateZ(值);
透视属性：perspective:值;（添加给父级，建议800~1200）

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>空间转换-位移透视</title>
  <style>
    body {
      perspective: 1000px;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: cadetblue;
      margin: 300px auto;
      transition: all 0.3s;
    }

    .box:hover {
      transform: translateZ(200px);
    }
  </style>
</head>

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

</html>

空间旋转

transform:rotateZ(值);
transform:rotateX(值);
transform:rotateY(值);
transform:(x,y,z,角度度数);（用来设置自定义旋转轴的位置及旋转的角度，x、y、z取值0-1之间的数字）

立体呈现transform-style: preserve-3d;

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>立体呈现</title>
  <style>
    .cube {
      width: 200px;
      height: 200px;
      margin: 300px auto;
      position: relative;
      transition: all 1s;
      /* 添加过渡效果，使变换平滑进行，持续1秒 */
      transform-style: preserve-3d;
      /* 设置立方体的变换样式为保留3D效果 */
    }

    .cube div {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 200px;
      color: whitesmoke;
      text-align: center;
      font-size: 80px;
      line-height: 200px;
    }

    .front {
      background-color: blueviolet;
      transform: translateZ(200px);
      /* 将前面面板平移200像素，使其位于立方体的前面 */
    }

    .back {
      background-color: brown;
    }

    .cube:hover {
      transform: rotateY(180deg);
      /* 鼠标悬停时，使立方体绕Y轴旋转180度 */
    }
  </style>
</head>

<body>
  <div class="cube">
    <div class="front">前面</div>
    <div class="back">后面</div>
  </div>
</body>

</html>

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>
    * {
      margin: 0;
      padding: 0;
    }

    .navs {
      width: 300px;
      height: 40px;
      margin: 50px auto;
    }

    .navs li {
      float: left;
      width: 100px;
      height: 40px;
      line-height: 40px;
      transition: all .5s;
      /* 添加过渡效果，使变换平滑进行，持续0.5秒 */
      list-style: none;
      position: relative;
      transform-style: preserve-3d;
      /* 设置导航菜单的变换样式为保留3D效果 */
    }

    .navs li a {
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      color: white;
      text-decoration: none;
      position: absolute;
      left: 0;
      top: 0;
    }

    .navs li a:first-child {
      background-color: green;
      transform: translateZ(20px);
      /* 将第一个链接平移20像素，使其稍微凸起 */
    }

    .navs li a:last-child {
      background-color: orange;
      transform: rotateX(90deg) translateZ(20px);
      /* 将最后一个链接绕X轴旋转90度，并沿Z轴平移20像素，使其垂直呈现 */
    }

    .navs li:hover {
      transform: rotateX(-90deg);
      /* 当鼠标悬停在导航菜单上方时，使菜单绕X轴旋转-90度，实现翻转效果 */
    }
  </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>