CSS-3D

最新推荐文章于 2024-07-26 08:00:00 发布

han0715

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量69

点赞数

文章标签： css 3d css3

本文链接：https://blog.csdn.net/bule_sky78/article/details/121104285

版权

11-2

3D

透视：perspective（给父元素设置透视)

perspective 设置的是透视点的距离：perspective属性的值/显示器的宽度

注意：perspective 也可以给子元素设置，应写为：

transform:perspective(300px) rotateY(45deg);

透视点的设置

用perspective-origin改变透视点的位置

 perspective-origin: 50% 50%;

3D效果

默认是二维平面效果，用transform-style: preserve-3d属性转为3D效果

 transform-style: preserve-3d;

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

变脸案列

<!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>
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 50px auto;
            border-radius: 50%;
            transform-style: preserve-3d;
            transition: all 1s;
        }

        .front,
        .back {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            color: #fff;
        }

        .front {

            background-color: darkorange;
            transform: rotateY(180deg);
        }

        .back {
            background-color: darkred;
        }

        .box:hover {
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">front</div>
        <div class="back">back</div>
    </div>
</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>
        .stage {
            border: 1px solid black;
            padding: 50px 0;
            perspective: 600px;
        }

        .container {
            position: relative;
            width: 120px;
            height: 90px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateY(0deg);
            transition: all .75s;
        }

        .container img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;

        }

        .container img:nth-child(1) {
            transform: rotateY(40deg) translateZ(200px);
        }

        .container img:nth-child(2) {
            transform: rotateY(80deg) translateZ(200px);
        }

        .container img:nth-child(3) {
            transform: rotateY(120deg) translateZ(200px);
        }
        .container img:nth-child(4) {
            transform: rotateY(160deg) translateZ(200px);
        }
        .container img:nth-child(5) {
            transform: rotateY(200deg) translateZ(200px);
        }
        .container img:nth-child(6) {
            transform: rotateY(240deg) translateZ(200px);
        }
        .container img:nth-child(7) {
            transform: rotateY(280deg) translateZ(200px);
        }
        .container img:nth-child(8) {
            transform: rotateY(320deg) translateZ(200px);
        }
        .container img:nth-child(9) {
            transform: rotateY(360deg) translateZ(200px);
        }
    </style>
</head>

<body>
    <div class="stage">
        <div class="container">
            <img src="./imgs/1.jpeg" alt="">
            <img src="./imgs/2.jpeg" alt="">
            <img src="./imgs/3.jpeg" alt="">
            <img src="./imgs/4.jpeg" alt="">
            <img src="./imgs/5.jpeg" alt="">
            <img src="./imgs/6.jpeg" alt="">
            <img src="./imgs/7.jpeg" alt="">
            <img src="./imgs/8.jpeg" alt="">
            <img src="./imgs/9.jpeg" alt="">
        </div>
    </div>
    <script>
        let angle=0
        document.querySelector('.container').addEventListener('click',function(){
            angle+=40
            this.style.transform='rotateY('+angle+'deg)'
        })
    </script>
</body>

</html>

han0715

关注

0
点赞
踩
0

收藏

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

11-23D透视：perspective（给父元素设置透视)perspective 设置的是透视点的距离：perspective属性的值/显示器的宽度注意：perspective 也可以给子元素设置，应写为：transform:perspective(300px) rotateY(45deg);透视点的设置用perspective-origin改变透视点的位置 perspective-origin: 50% 50%;3D效果默认是二维平面效果，用transform-style: pr
复制链接

扫一扫