32.三维转换属性

Suyuoa

已于 2022-07-21 15:26:20 修改

阅读量1.4k

点赞数

分类专栏： CSS3笔记文章标签： css

于 2022-04-07 15:23:43 首次发布

本文链接：https://blog.csdn.net/potato123232/article/details/124017529

版权

CSS3笔记专栏收录该内容

52 篇文章 0 订阅

订阅专栏

三维在网页中显示出来有两个特点

近大远小
被遮挡后不可见

三维转换有四个常用属性，3D位移(translate3d)，3D旋转(rotate3d)，透视(perspective)，3D呈现(transfrom-style)

与二维转换相同，由于转换的属性名都为transform，所以无论写多少transform只有最后的语句生效，写一个二维的再写一个三维的，也是只有最后的语句生效

4.4 自定义轴旋转 rotate3d(x,y,z,deg)

5 三维呈现 transform-style

6 两面反转的盒子效果

7 三维导航栏效果

8 旋转木马效果

1 三维坐标系

三维坐标系的x,y与二维一致

z轴的正方向是从屏幕指向屏幕前的你

2 透视 perspective

部分3D效果如果想在页面上有效果，必须加入透视，加入透视就相当于将斜着看当前页面，如果没加透视效果就是这样的

下面我对一张图片进行3D旋转

加入了透视就是这样的

perspective需要跟下图的参数d

我们称参数d为视距，可以理解为眼镜与屏幕的距离，d值设置的越小，原本的图像就会显示的越大

透视属性一定要设置在被透视元素的父对象上，比如我现在要对div进行透视

那么就要设置在body上

只设置perspective在视觉上没有任何效果的，我们下面移动z轴就可以看出效果了

3 三维移动 translate3d

它的语法是这样的

transform:translateX(100px):仅在x轴上移动
transform:translateY(100px):仅在y轴上移动
transform:translateZ(100px):仅在z轴上移动,translateZ一般只用px单位(不用百分比等其他单位)
transform:translate3d(x,y,z) 其中x,y,z分别指要移动的轴方向的距离

如果你想要同时使用多个那么可以这样写 transform:translateX(50px) translateY(100px) 这样它就会在X方向移动50px，在y方向移动100px。与二维转换的统一设置同理

我们现在用一下

我们现在再将z轴置为负数

效果并不是很明显，我们将其做成一组动画看一看

看完这一组动画就能明白Z轴的移动效果了

4 三维旋转

在三维旋转中我们可以让元素沿着x,y,z轴或自定义轴进行旋转，它的语法是这样的

最后一个一般不用

为了更好的展示效果，我们用一张图片进行旋转，我们依然使用动画

4.1 x轴旋转 rotateX()

这里是可以不加透视的，透视会让效果更加明显

它是以图片的横中线进行旋转的

如果把perspective调小就会有糊脸的感觉

角度也可以给负值，

如果是正值则上端会向屏幕内倾斜，下端会向屏幕外倾斜

如果是负值则上端会向屏幕外倾斜，下端会向屏幕内倾斜

4.2 y轴旋转 rotateY()

y是沿着图片的竖中线进行旋转

角度也可以给负值

如果是正值则右端会向屏幕内倾斜，左端会向屏幕外倾斜

如果是负值则右端会向屏幕外倾斜，左端会向屏幕内倾斜

4.3 z轴旋转 rotateZ()

z轴是从屏幕指向你的轴，所以z轴的旋转，实际上就是平面的旋转

它默认以图像中心点所在轴进行旋转

角度也可以给负值，旋转Z轴时，正值是顺时针，负值是逆时针

4.4 自定义轴旋转 rotate3d(x,y,z,deg)

x,y,z只能是1或者0，如果我设置三个1，那么它则会绕x,y,z三轴的矢量和进行旋转，大概是下图中的原点指向你的这条轴

效果可以自己看一下

如果你只想绕一个轴旋转，将另外的两个轴置为0就可以了

5 三维呈现 transform-style

我们现在想做这样一个效果，父盒子Y轴转动，红盒子X轴转60度不动

代码我们这样写

我们发现此时的效果是这样的

红色的盒子没有展示出来3D的效果，这个时候我们在父对象中加入3D呈现

这样就达到了我们想要的效果

transform-style默认情况下取值flat，flat不呈现3D效果，我们现在设置为preserve-3d，preserve-3d是呈现3D效果

6 两面反转的盒子效果

效果是这样的，打开后出现我们的正面盒子

鼠标悬停后逐渐看到我们的反面盒子

代码是这样的

思路是先将反面的盒子翻个个儿，然后在整体盒子的hover中将盒子整体翻个，perspective写不写无所谓，注意保留3D呈现

7 三维导航栏效果

打开页面后是这样的

当我们鼠标移动上去的时候回把下面的面翻上去

代码是这样的

在调试的时候可以加入perspective，加上了效果就是这样的

原理是以这个体的中心轴进行旋转，这样这两个盒子的位置就不会变

要使用中心轴旋转就必须将正常面与隐藏面分别移动，这样就能构成一个上图样子的体

8 旋转木马效果

效果是这样的

内侧1张图像，外侧6张图像，均可以放置不同的图片，这七张图像会像旋转木马一样不停旋转

代码是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            perspective:2000px;
        }
        div {
            position:absolute;
            width:325px;
            height:462px;
        }
        img {
            width:100%;
            height:100%;
        }
        .all {
            margin:300px auto;
            position:relative;
            transform-style:preserve-3d;
            animation:six_rotate 15s linear infinite;
        }

        @keyframes six_rotate {
            100% {transform:rotateY(360deg);}
        }

        .all div:nth-child(1) {
            transform:translateZ(300px);
        }
        .all div:nth-child(2) {
            transform:rotateY(60deg) translateZ(300px);
        }

        .all div:nth-child(3) {
            transform:rotateY(120deg) translateZ(300px);
        }

        .all div:nth-child(4) {
            transform:rotateY(-60deg) translateZ(300px);
        }

        .all div:nth-child(5) {
            transform:rotateY(-120deg) translateZ(300px);
        }

        .all div:nth-child(6) {
            transform:translateZ(-300px);
        }

    </style>
</head>
<body>
<div class="all">
    <div><img src="../CSS3.png" alt=""></div>
    <div><img src="../CSS3.png" alt=""></div>
    <div><img src="../CSS3.png" alt=""></div>
    <div><img src="../CSS3.png" alt=""></div>
    <div><img src="../CSS3.png" alt=""></div>
    <div><img src="../CSS3.png" alt=""></div>
<!--    中间的图像-->
    <div><img src="../CSS3.png" alt=""></div>
</div>
</body>
</html>

这里注意一点，先转再移动Z轴，这样就能便捷的让每一张图像与体的中心点一致了

也可以换别的个数，改一下度数就可以了，度数是360/n

Suyuoa

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
32.三维转换属性

三维在网页中显示出来有两个特点近大远小被遮挡后不可见三维转换有四个常用属性，3D位移(translate3d)，3D旋转(rotate3d)，透视(perspective)，3D呈现(transfrom-style)与二维转换相同，由于转换的属性名都为transform，所以无论写多少transform只有最后的语句生效，写一个二维的再写一个三维的，也是只有最后的语句生效目录1三维坐标系2透视 perspective3三维移动 translate3d4三维旋........
复制链接

扫一扫