前端自学笔记3：空间位移

HZWANG30

已于 2023-06-28 21:24:18 修改

阅读量206

点赞数

分类专栏：前端自学笔记文章标签：前端笔记 css

于 2023-04-19 21:16:33 首次发布

本文链接：https://blog.csdn.net/qq_44986029/article/details/130230883

版权

前端自学笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

前端自学笔记3：空间位移

1、空间位移属性：x轴正向指向右；Y轴正向指向下，Z轴正向指向屏幕外侧（想象一根竹子从屏幕穿出来指向屏幕前的你，这个方向就是z轴的方向。）

在这里插入图片描述

/*给对应标签设置hover样式，对三个轴向同时设置位移代码*/
/*分别是X、Y、Z轴的位移像素，正值表示向对应轴的正向移动，负值表示向负方向移动。*/
transform: translate3d(50px, 100px, 200px);

效果如下：
请添加图片描述这里效果只显示在X轴和Y轴移动，是因为目前的标准流是一个平面，后边会介绍一个属性来显示Z轴的位移效果。

另外还可以单独设置某个轴向的位移，但是只能单独使用其中一个，防止样式重叠。

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

2、透视属性：perspective

相当于标准流不再是一个平面，而是有前后关系的空间，向前移动的东西会变大，向后移动的东西会变小（可以观察出Z轴移动效果）
属性值给父元素设置，且一般设置为：800px~1200px（这里像素值代表模拟客户眼睛到屏幕的距离，设置太小或太大效果不好）。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
    body {
      perspective: 1000px;
    }
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }
    .box:hover{
      /* transform: translateZ(200px); */
      /*正值表示向屏幕外移动，会变大*/
      transform: translateZ(-200px);/*负值表示向屏幕里移动，会变小*/
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

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

3、空间旋转效果

transform:rotateZ(旋转角度)；沿Z轴旋转（相当于沿中心旋转）单位是deg。

代码：（一边沿Z轴旋转60度），一遍向Z轴正向移动200px

<!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: 300px auto;
            perspective: 1000px;
        }
        img {
            width: 300px;
            transition: all 1s;
        }
        .box img:hover {
            transform: rotateZ(60deg) translateZ(200px);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

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

transform:rotateX(旋转角度)；沿X轴旋转。

/*给对应盒子设置hover属性：*/
transform: rotateX(60deg);

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

transform:rotateY(旋转角度)；沿Y轴旋转。

/*给对应盒子设置hover属性：*/
transform: rotateY(60deg);

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

PS：以上三个属性的方向都可以通过左手法则记忆：将左手大拇指方向指向轴的方向，则四指弯曲的方向就是rotate取值为正时的方向。

transform: rotate3d(x,y,z,角度度数); xyz取值为0-1之间的数字。一般不使用。

4、立体呈现 transform-style:perserve-3D;

在这里插入图片描述
例如，想要实现上图两个平面的前后效果。思路：首先使用子绝父相将两个平面重合在一起；然后通过设置其中一个盒子在Z轴方向上移动拉开二者距离；最后用沿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>立体呈现</title>
    <style>
        .cube {
            position: relative;/*父相*/
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            transform-style: preserve-3d;/*想要观看立体效果，必须加该属性*/
        }
        .cube div {
            position: absolute;/*子绝，通过子绝父相将两个前后面重合在一起*/
            width: 200px;
            height: 200px;
        }
        .front {
            background-color: rgba(255, 165, 0,.5);
            transform: translateZ(200px);/*将前面的面通过Z轴位移向前拉200px*/
        }
        .back {
            background-color: rgba(0, 128, 0);
            transform: translateY(-50px);/*为了方便观看效果，将靠后的那一面向上移动了px，且将两个盒子bgc设置了透明度*/
        }
        .cube:hover {
            transform: rotateY(30deg);/*沿Y轴转动30度，查看效果*/
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

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

5、3D导航栏的实现

效果：
在这里插入图片描述
思路：将绿色和橙色在空间上设置成如下样式，再加上hover属性即可。

实现过程：
1、将绿色橙色两个标签设置为如下样式：

2、然后将橙色沿X轴旋转90度，使两个图片排列成垂直的关系，即绿色平行于屏幕，橙色垂直于屏幕；
在这里插入图片描述
3、通过位移调整二者的空间位置；
此时橙色距离绿色顶边为60px，使其向上移动60px：

此时绿色盒子顶边位于橙色盒子的中间，使其向前移动20px：

4、随后给对应的标签加上hover属性，使其沿X轴旋转-90deg。
全部代码


<!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 {
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            /*transform: rotateX(-20deg) rotateY(30deg);方便观看效果*/
            transform-style: preserve-3d;
        }
        .navs li a {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
            perspective: 1000px;
        }
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        .navs li a:last-child {
            background-color: orange;
            transform: translateY(-60px) rotateX(90deg);
        }
        .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>

HZWANG30

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端自学笔记3：空间位移

相当于标准流不再是一个平面，而是有前后关系的空间，向前移动的东西会变大，向后移动的东西会变小（可以观察出Z轴移动效果）这里效果只显示在X轴和Y轴移动，是因为目前的标准流是一个平面，后边会介绍一个属性来显示Z轴的位移效果。2、然后将橙色沿X轴旋转90度，使两个图片排列成垂直的关系，即绿色平行于屏幕，橙色垂直于屏幕；/*为了方便观看效果，将靠后的那一面向上移动了px，且将两个盒子bgc设置了透明度*//*正值表示向屏幕外移动，会变大*//*负值表示向屏幕里移动，会变小*//*沿Y轴转动30度，查看效果*/
复制链接

扫一扫