3D转换(内附浏览器私有前缀)

9个月前 (09-01) 559次浏览 已收录 0个评论

三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。

  • x轴:水平向右 注意: x 右边是正值,左边是负值
  • y轴:垂直向下 注意: y 下面是正值,上面是负值
  • z轴:垂直屏幕 注意: 往外面是正值,往里面是负值

3D位移translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向

  • translform:translateX(100px):仅仅是在x轴上移动
  • translform:translateY(100px):仅仅是在Y轴上移动
  • translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)
  • transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离,且xyz不能省略,如果没有就写0

因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动,借助透视可以看到

移动永远写在最前面,不然结果会变,即先移动,再旋转,除非个别不是移动永远写在最前面。

透视perspective

语法:

perspective:500px

透视:在2D平面产生近大远小视觉立体,但只是二维的

  • 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
  • 模拟人类的视觉位置,可认为安排一只眼睛去看
  • 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
  • 距离视觉点越近的在电脑平面成像越大,越远成像越小
  • 透视的单位是像素

透视写在被观察元素的父盒子上面的(不要求直系)

d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。

z:就是 z轴,物体距离屏幕的距离,z轴越大(正值) 我们看到的物体就越大

translateZ

  • translform:translateZ(100px):仅仅是在Z轴上移动。
  • 有了透视,就能看到translateZ 引起的变化了
    • 近大远小
    • 往外是正值
    • 往里是负值

3D旋转rotate3d

3D旋转指可以让元素在三维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转。

  • transform: rotateX(45deg) :沿着X轴正方向旋转45度
  • transform: rotateY(45deg) :沿着Y轴正方向旋转45度
  • transform: rotateZ(45deg) :沿着Z轴正方向旋转45度
  • transform: rotate3d(x,y,z,deg) :沿着自定义轴旋转 deg为角度,1代表转了,0代表不转,(了解即可)

xyz是表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度。

/*沿着X轴旋转45deg*/
transform: rotate3d(1,0,0,45deg) 
/*沿着对角线旋转45deg*/
transform: rotate3d(1,1,0,45deg)
<!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>
        body{
            perspective: 150px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 0);
            margin: 100px auto;
            transition: all 1s;
        }
        div:hover{
            transform: rotateX(360deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
结果演示

3D呈现transform-style

  1. 控制子元素是否开启三维立体环境
  2. transform-style: flat 子元素不开启3d立体空间 默认的
  3. transform-style: preserve-3d 子元素开启立体空间
  4. 代码写在父级(要求直系),但影响的是子盒子

测试:

<!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>
        body{
            perspective: 500px;
        }
        .box{
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子元素保持3d立体空间环境,也是看见立体效果的必备条件 */
            transform-style: preserve-3d;
        }
        .box:hover{
            /* 旋转父盒子,才能看到子盒子,即所有子元素的内容*/
            transform: rotateY(60deg);
        }
        .box div{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        
        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
</html>
结果演示

浏览器私有前缀

  • -moz- :Firefox浏览器
  • -ms- :IE浏览器
  • -webkit- :safari、chrome浏览器
  • -o- :Opera浏览器

提倡写法(组合写):

-moz-border-radius:10px;
border-radius:10px

渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:3D转换(内附浏览器私有前缀)
喜欢 (1)

您必须 登录 才能发表评论!