简单的css3美女效果图

最新推荐文章于 2024-06-29 19:07:49 发布

每天努力搬砖

最新推荐文章于 2024-06-29 19:07:49 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/txw0415/article/details/80425313

版权

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3d相册</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color:tomato;
            /* 视觉效果 */
            perspective: 500px;
        }

        ul {
            margin: 100px auto;
            width: 240px;
            height: 350px;
            background-color: #fff;
            list-style: none;
            position: relative;
            transition: all 1s;
            /* 开始3d效果, 父盒子开始了3d效果之后，3d空间就被打开了，子元素就可以不用去设置该属性了; */
            transform-style: preserve-3d;
            /* 改变旋转轴的位置 */
            transform-origin: bottom;
        }

        ul:hover {
            transform: rotateX(45deg);
        }

        li {
            width: 240px;
            height: 350px;
            border: 1px solid gold;
            position: absolute;
            /* 改变旋转轴的位置为左侧 */
            transform-origin: left;
            background-color: #fff;
        }

        li:nth-child(5) {
            background: url("./girl1.jpg") left top/ 100% 100% no-repeat;
        }
        li:nth-child(4) {
            background: url("./girl2.jpg") left top/ 100% 100% no-repeat;
        }
        li:nth-child(3) {
            background: url("./girl3.jpg") left top/ 100% 100% no-repeat;
        }
        li:nth-child(2) {
            background: url("./girl4.jpg") left top/ 100% 100% no-repeat;
        }

        li:nth-child(1) {
            background: url("./girl5.jpg") left top/ 100% 100% no-repeat;
        }

        ul:hover li:nth-child(5) {
            transition: all 1s 1s;
            transform: rotateY(-170deg);
        }

        ul:hover li:nth-child(4) {
            transition: all 1s 2s;
            transform: rotateY(-150deg);
        }

        ul:hover li:nth-child(3) {
            transition: all 1s 3s;

            transform: rotateY(-130deg);
        }

        ul:hover li:nth-child(2) {
            transition: all 1s 4s;
            transform: rotateY(-110deg);
        }
    </style>

</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

总结

1. 如果想要开启3d效果，那么需要给该元素设置tansform-style: preserve-3d;
2. 如果想要有近大远小的效果，就需要给其父盒子设置 perspective: 500px;
3. 如果我们想要改变旋转轴的位置，那么就需要设置transform-origin

每天努力搬砖

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
简单的css3美女效果图

效果代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫