3D照片案例

最新推荐文章于 2024-04-28 15:06:30 发布

天上人间一样愁

最新推荐文章于 2024-04-28 15:06:30 发布

阅读量241

点赞数 1

本文链接：https://blog.csdn.net/weixin_44392027/article/details/87985119

版权

重在理解！！！
个人感觉不难，貌似需要一点点空间思维

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 5px solid #ccc;
            border-radius: 10px;
            /*box-sizing:border-box;*/
            position: absolute;

        }
        .big{
            width: 400px;
            height: 335px;
            position: relative;
            margin: 400px auto;
            transform: rotateX(30deg) rotateY(-20deg);
            transform-style: preserve-3d;
            transition: transform 1s;
            border: none;
        }

        img{
            transition: transform 1s;
        }
        div:nth-child(2){
            transform: translateZ(450px);
        }
        div:nth-child(3){
            transform: translateZ(-450px);
        }
        div:nth-child(4){
            transform: rotateY(-60deg) translateZ(-450px);
        }
        div:nth-child(5){
            transform: rotateY(-60deg) translateZ(450px);
        }
        div:nth-child(6){
            transform: rotateY(-120deg) translateZ(450px);
        }
        .div1{
            transform: rotateY(-120deg) translateZ(-450px);
        }
        /*.div1:hover{*/
            /*transform: scale(1.5);*/
        /*}*/
        /*.div2:hover{*/
            /*transform: scale(1.5);*/
        /*}*/
        img:hover{
            transform: scale(1.5);
        }
    </style>
</head>
<body>
<div class="big">
    <div class="div1"><img src="img/1.jpg" height="300" width="300"/></div>
    <div class="div2"><img src="img/2.jpg" height="300" width="300"/></div>
    <div class="div2"><img src="img/3.jpg" height="300" width="300"/></div>
    <div class="div2"><img src="img/4.jpg" height="300" width="300"/></div>
    <div class="div2"><img src="img/5.jpg" height="300" width="300"/></div>
    <div class="div2"><img src="img/6.jpg" height="300" width="300"/></div>
</div>
</body>
</html>

效果图如下
在这里插入图片描述

告辞！

天上人间一样愁

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3D照片案例

重在理解！！！个人感觉不难，貌似需要一点点空间思维&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫