0
点赞
收藏
分享

微信扫一扫

3D空间转换(位移、旋转、立体呈现)

whiteMu 2022-01-26 阅读 22

属性:transform,z轴垂直于屏幕,正值方向指向用户,负值方向指向屏幕里面。

空间位移:

复合语法:transform:translate3d(x,y,z);

单独语法:transform:translateX(值);transform:translateY(值);transform:translateZ(值);

x、y轴上的改变与2d位移没有区别,z轴上的移动需要给父级添加perspective: 像素单位数值;实现透视效果。

 perspective 常用数值范围在 800-1200 之间。代表意思为视距,作用是在 空间转换时,为元素添加 近大远小、近实远虚的视觉效果。

例:

两个一样大小的粉蓝方块,如果没加perspective,hover之后看不到变化,但实际上box2向z轴移动了。hover后box2和box1不处在同一个水平面,他们之间有梯度,正面看的效果便是box2比box1大,因为box2离用户更近。

 

<style>
    .box{
      margin:100px auto;
      width: 700px;
      perspective: 1100px;
    }
    .box1 {
      width: 200px;
      height: 200px;
      margin:0 30px;
      float: left;
      background-color: pink;
    }
    .box2 {
      width: 200px;
      height: 200px;
      margin:0 30px;
      float: left;
      background-color: rgb(116, 211, 248);
    }

    .box2:hover {
      transform: translateZ(100px);
    }
  </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>

空间旋转:

复合语法:transform:rotate3d(x,y,z,角度度数);

x、y、z取值为0-1。复合语法是用来设置自定义旋转轴的位置及旋转的角度,极少使用

单独语法:transform:rotateX();transform:rotateY();transform:rotateZ();

绕轴旋转。

例:

以下图片分别是原图、没加perspective绕x轴45度效果、加了透视1000px后分别绕x轴、y轴、z轴正值方向45度效果。

 

<style>
        .box {
            width: 300px;
            margin: 100px auto;
            border: 2px solid #000;
            perspective: 1000px;
        }

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

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

判断旋转方向:

左手法则: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。

立体呈现:

perspective只能呈现近大远小、近实远虚的视觉效果,让z轴位移看得出变化,但不能呈现立体图形翻面等效果。

所以需要给父级添加 transform-style: preserve-3d; 使子元素处于真正的3d空间

例:两个大小相同颜色不同的块,一个在前一个在后,使用transform-style: preserve-3d;的效果。

 

 

<style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            /*使子元素处于3D空间*/
            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(55deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

 

举报

相关推荐

0 条评论