代码编织梦想

css样式部分:

<style>

        body:hover main{

            transform: rotateY(360deg);

        }

        body{

             /* 景深只对子标签有效果,自身没有3d效果 */

            perspective: 1000px;

            /* 景深的基准点,默认是50% 50% 就是正对中心看 */

            /* 可以调整基准点,从上斜向下看 */

            perspective-origin: 50% 10%;

        }

        main{

            transition: 10s;

            width: 1000px;

            height: 500px;

            /* border: 1px solid; */

            margin: auto;

            /* perspective景深也不会对字标签的字标签起效 */

            /* 通过以下属性传递景深3d效果,使下层子标签也有3d效果 */

            transform-style: preserve-3d;

        }

        div{

            width: 100px;

            height: 200px;

            background-color: orangered;

            position: absolute;

            margin: 150px 450px;

            /* 透明度 */

            /* opacity: 0.4; */

        }

        img{

            width: 100%;

            height: 100%;

        }

    </style>

内容部分:

<main>

<div style="transform: rotateY(0deg)  translateZ(300px);">

<img src=" 图片地址(可以离线或网址) " alt="">

</div>

<div style="transform: rotateY(30deg)  translateZ(300px);">

<img src=" 图片地址(可以离线或网址) " alt="">

</div>

(此处省略10个div)

......(下面可以对上面进行复制粘贴, rotateY()内的旋转酵素需要变化,这里因为有12张图片,所以每一个角度为360/12为30,自己可以根据需要进行添加或减小。translateZ(300px)不变)。

</main>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_63865701/article/details/129413356

[vue]提供一种网站底部备案号样式代码-爱代码爱编程

演示 vue组件型(可直接用) 组件代码:copyright-icp.vue <template> <div class="icp">{{`© ${year} ${auth