CSS3 -3D转换

最新推荐文章于 2022-11-24 20:44:15 发布

学习中的小菜鸟.

最新推荐文章于 2022-11-24 20:44:15 发布

阅读量112

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_33962481/article/details/117409824

版权

CSS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

文章目录

一、3D转换
- 透视 perspective
二、3D旋转
- 语法
- 3D呈现 transfrom-style
案例 : 3D按钮
案例 : 旋转木马

一、3D转换

3D比2D多了一个Z轴

translateZ : 沿着Z轴移动
translate3d() : 3D移动简写的方法
- translate3d(x,y,z);
translateZ后面的单位一般跟px.

透视 perspective

类似于电灯照到物体上面, 投影在墙壁上面影子的大小
电灯离物体越近, 影子越大,
电灯离物体越远, 影子越小 .

透视写在被观察元素的父盒子上面的
d: 就是视距, 即电灯到墙壁的距离
z : 就是z轴, 物体距离屏幕的距离, z轴越大, 我们看到的物体就越大.

二、3D旋转

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度.

3D呈现 transfrom-style

控制子元素是否开启三维立体环境.
transform-style: flat; 子元素不开启3d立体空间, 默认的.
transform-style: preserve-3d; 子元素开启立体空间.
代码写给父级.

案例 : 3D按钮

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 100px;
        }

        ul li {
            width: 200px;
            height: 100px;
            list-style: none;
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transition: all 1s;
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateX(90deg);
        }

        .front,
        .bottom {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            line-height: 100px;
            text-align: center;
        }

        .front {
            background-color: green;
            z-index: 1;
            transform: translateZ(50px)
        }

        .bottom {
            background-color: yellow;
            transform: translateY(50px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">黑马程序员</div>
                <div class="bottom">嘿嘿嘿</div>
            </div>
        </li>
    </ul>
</body>

</html>

案例 : 旋转木马

<!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>Document</title>
    <style>
        body {
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .box {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 200px auto;
            transform-style: preserve-3d;
            transition: all 5s;
            background-image: url(./images/pig.jpg);
        }

        .box:hover {
            transform: rotateY(360deg);
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(./images/dog.jpg);
        }

        .box1 {
            background-color: green;
            transform: rotateY(0deg) translateZ(350px);
        }

        .box2 {
            background-color: pink;
            transform: rotateY(60deg) translateZ(350px);
        }

        .box3 {
            background-color: yellow;
            transform: rotateY(120deg) translateZ(350px);
        }

        .box4 {
            background-color: yellowgreen;
            transform: rotateY(180deg) translateZ(350px);
        }

        .box5 {
            background-color: gray;
            transform: rotateY(300deg) translateZ(350px);
        }

        .box6 {
            background-color: blue;
            transform: rotateY(240deg) translateZ(350px);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box0"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </div>
</body>

</html>

学习中的小菜鸟.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 -3D转换

文章目录一、3D转换透视 perspective二、3D旋转语法3D呈现 transfrom-style案例 : 3D按钮案例 : 旋转木马一、3D转换3D比2D多了一个Z轴translateZ : 沿着Z轴移动translate3d() : 3D移动简写的方法translate3d(x,y,z);translateZ后面的单位一般跟px.透视 perspective类似于电灯照到物体上面, 投影在墙壁上面影子的大小电灯离物体越近, 影子越大,电灯离物体越远, 影子越小 .
复制链接

扫一扫