css3-3D透明照片墙

1.准备n张照片

div放入照片,在同一个父级容器下

设置父类的transform-style:preserve-3d和persepective

六个div设置成绝对定位,重叠在一起

2.子元素做简单的变换,成旋转木马形状图片

子元素用transform:rotate旋转

因此是绕 Y 轴的,我们关心的是 rotateY 的大小,根据我们添加的图片数量,用 360° 的圆周角将每个图片等分,也就是让每张图片绕 Y 轴旋转固定角度依次散开

3.每个子元素做translateZ变换

N 张图片设定一个 translateZ 后,图片就很自然以中点为圆心分散开了

4.父元素做动画

最后利用 animation ,也就是包裹着图片的容器绕 Y 轴旋转起来(rotateY)或者绕X,Y,Z旋转,那么一个类似旋转木马的 3D 照片墙效果就完成了!

https://github.com/wanghuanweb/wanghuan.github.io/tree/master/css/css3%E5%8A%A8%E7%94%BB%E8%AE%BE%E8%AE%A1/3D%E9%80%8F%E6%98%8E%E7%85%A7%E7%89%87%E5%A2%99



<html>
    <head>
        <meta charset="utf-8">
        <link href="index.css" rel="stylesheet">
    head>

    <body>
        <div class="container">
            <div class="box box1">div>
            <div class="box box2">div>
            <div class="box box3">div>
            <div class="box box4">div>
            <div class="box box5">div>
            <div class="box box6">div>
        div>
    body>
html>
*{
    margin: 0px;
    padding: 0px;
}

html,body{
    height: 100%;
    background: black;
}

.container{
    height: 100%;
    position: relative;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform: rotateX(-20deg) rotateY(20deg);
    -moz-transform: rotateX(-20deg) rotateY(20deg);
    -o-transform: rotateX(-20deg) rotateY(20deg);
    transform: rotateX(-20deg) rotateY(20deg);

    -webkit-animation:move 10s infinite;
    -moz-animation:move 10s infinite;
    -o-animation:move 10s infinite;
    animation: move 10s infinite;
}

.box{
    position: absolute;

    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -100px;

}

.box1{
    -webkit-transform: rotateY(60deg) translateZ(400px);
    -moz-transform: rotateY(60deg) translateZ(400px);
    -o-transform: rotateY(60deg) translateZ(400px);
    transform: rotateY(60deg) translateZ(400px);
    background:rgba(222,134,128,0.5);
}

.box2{
    -webkit-transform: rotateY(120deg) translateZ(400px);
    -moz-transform: rotateY(120deg) translateZ(400px);
    -o-transform: rotateY(120deg) translateZ(400px);
    transform: rotateY(120deg) translateZ(400px);
    background: rgba(100,127,255,0.5);
}

.box3{
    -webkit-transform: rotateY(180deg) translateZ(400px);
    -moz-transform: rotateY(180deg) translateZ(400px);
    -o-transform: rotateY(180deg) translateZ(400px);
    transform: rotateY(180deg) translateZ(400px);
    background: rgba(80,153,204,0.5);
}

.box4{
    -webkit-transform: rotateY(240deg) translateZ(400px);
    -moz-transform: rotateY(240deg) translateZ(400px);
    -o-transform: rotateY(240deg) translateZ(400px);
    transform: rotateY(240deg) translateZ(400px);
    background: rgba(0,204,255,0.5);
}

.box5{
    -webkit-transform: rotateY(300deg) translateZ(400px);
    -moz-transform: rotateY(300deg) translateZ(400px);
    -o-transform: rotateY(300deg) translateZ(400px);
    transform: rotateY(300deg) translateZ(400px);
    background: rgba(153,204,255,0.5);
}

.box6{
    -webkit-transform:translateZ(400px);
    -moz-transform:translateZ(400px);
    -o-transform:translateZ(400px);
    transform:translateZ(400px);
    background: rgba(0,255,255,0.5);
}

@-webkit-keyframes move{
    0%{
        -webkit-transform: rotate3d(0deg,0deg,0deg);
    }
    100%{
        -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}

@-moz-keyframes move{
    0%{
        -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
        -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}

@-o-keyframes move{
    0%{
        -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
        -o-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}

@keyframes move {
    0%{
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}

你可能感兴趣的:(css)