实现-魔方照片墙

时间：2025-02-14 21:01:30
实现-魔方照片墙
思路步骤：
1.图片准备：寻找你要实现的照片——6张
代码：
<div class="wrapper">
        <img src="source/" alt="">
        <img src="source/" alt="">
        <img src="source/" alt="">
        <img src="source/" alt="">
        <img src="source/" alt="">
        <img src="source/" alt="">
</div>

说明：用一个大的div容器包裹住6张图片，这样的好处是：可以继承父级的属性

3.接下来是CSS部分的实现说明：

​ 1）景深效果的实现，离不开perspective：相应的像素和 transform-style: preserve-3d;

​ perspective：景深的距离；可以使得其子元素会获得透视效果，立体感。本次内容的关键属性

​ transform-style: preserve-3d; 3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。

​ 2)两个属性，二选其一即可。一旦使用以上属性，body就成为了定位参照物元素，虽然它身上没有position: relative,但它依然可以成为参照物。子元素没有高度，需要它传承高度

:root{
          height: 100%;
     }

body{
		perspective: 3000px;
        transform-style: preserve-3d;
        height: 100%;
     }

​ 3）父级的CSS设置，可以用CSS3的属性实现居中：

.wrapper{
            position: absolute;
            width: 300px;
            height: 300px;
            left: calc(50%);
            top: calc(50%);
            transform: translate(-50%, -50%);
          }

​ 4)接下来是img旋转角度的部分：这里我选择先用水平的4个面，即前后左右，让rotateY沿着y轴旋转90°，再用translateZ沿着Z轴旋转相应的度数，如果在body没有设置perspective，则看不到效果。注意，这里的度数可根据自己图片进行调节。

说明：在transform中先旋转后平移、先平移后旋转的效果是不一样的

​ 5）最后是关键帧动画的设置。只需设置from和to两个起始和结束的状态，在animation里面设置动画的时长

animation: move 10s linear infinite;
4.完整代码的实现

html代码

<div class="wrapper">
        <img src="source/" alt="">
        <img src="source/" alt="">
        <img src="source/" alt="">
        <img src="source/" alt="">
        <img src="source/" alt="">
        <img src="source/" alt="">
    </div>

CSS代码

<style>
        @keyframes move {
            form{
                transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg);
            }
            to{
                transform: translate(-50%, -50%) rotateY(360deg) rotateY(360deg);
            }
        }

        :root,html{
            height: 100%;
        }

        body{
            perspective: 3000px;
            transform-style: preserve-3d;
            height: 100%;
        }

        .wrapper{
            position: absolute;
            width: 300px;
            height: 300px;
            left: calc(50%);
            top: calc(50%);
            transform: translate(-50%, -50%);
            transform-style: preserve-3d;
            animation: move 10s linear infinite;
        }

        img:nth-of-type(1),
        img:nth-of-type(2),
        img:nth-of-type(3),
        img:nth-of-type(4),
        img:nth-of-type(5),
        img:nth-of-type(6) {
            position: absolute;
            /* left: 50%;
            top: 50%; */
            width: 100%;
            height: 100%;
            opacity: 0.6;
        }


        img:nth-of-type(1) {
            background-color: red;
            transform: translateZ(150px) ;
        
        }
        img:nth-of-type(2) {
            background-color: red;
            transform:rotateY(90deg)  translateZ(150px);
        }
        img:nth-of-type(3) {
            background-color: red;
            transform:rotateY(180deg) translateZ(150px) ;
        }
        img:nth-of-type(4) {
            background-color: red;
            transform: rotateY(270deg) translateZ(150px);
        }
        img:nth-of-type(5) {
            background-color: red;
            transform: rotateX(90deg) translateZ(150px);
        }
        img:nth-of-type(6){
            background-color: red;
            transform:rotateX(270deg) translateZ(150px) ;
        }
    </style>

相关文章