3d正方体旋转相册代码_3D正方体旋转相册来啦！！！！

点击上方 “公众号” 可以订阅哦！

3D正方体旋转相册

    最近旋转相册在抖音上很火，今天小编就给大家带来了具体的实现代码。上干货！

第一步 完成基本的HTML结构

第二步 利用transform变换，营造立体感。

第三步 加入动画

实现的结果就是这样！！(原谅实在不会设置gif图 只能上个静态图)

最后附上源代码！！！照片换成自己想要展示的即可！！

3d相册

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 500px;

            height: 500px;

            margin: 200px auto;

            position: relative;

            -webkit-perspective: 1500px;

        }

        ul {

            width: 500px;

            height: 500px;

            transform-style: preserve-3d;

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

            animation: 16s spin linear infinite;

        }

        li {

            width: 400px;

            height: 400px;

            list-style-type: none;

            position: absolute;

        }

        ul li img {

            width: 100%;

            height: 100%

        }

        ul :nth-child(1){

            transform: rotateY(0deg) translateZ(200px); -webkit-transform: rotateY(0deg) translateZ(200px); -moz-transform: rotateY(0deg) translateZ(200px); -o-transform: rotateY(0deg) translateZ(200px);

        }

        ul :nth-child(2){

            transform: rotateY(-90deg) translateZ(200px); -webkit-transform: rotateY(-90deg) translateZ(200px); -moz-transform: rotateY(-90deg) translateZ(200px); -o-transform: rotateY(-90deg) translateZ(200px);

        }

        ul :nth-child(3) {

            transform: rotateY(-180deg) translateZ(200px); -webkit-transform: rotateY(-180deg) translateZ(200px); -moz-transform: rotateY(-180deg) translateZ(200px); -o-transform: rotateY(-180deg) translateZ(200px);

        }

        ul :nth-child(4){

            transform: rotateY(-270deg) translateZ(200px); -webkit-transform: rotateY(-270deg) translateZ(200px); -moz-transform: rotateY(-270deg) translateZ(200px); -o-transform: rotateY(-270deg) translateZ(200px);

        }

        ul :nth-child(5){

            transform: rotatex(90deg) translateZ(200px); -webkit-transform: rotatex(90deg) translateZ(200px); -moz-transform: rotatex(90deg) translateZ(200px); -o-transform: rotatex(90deg) translateZ(200px);

        }

        ul :nth-child(6){

            transform: rotatex(90deg) translateZ(-200px); -webkit-transform: rotatex(90deg) translateZ(-200px); -moz-transform: rotatex(90deg) translateZ(-200px); -o-transform: rotatex(90deg) translateZ(-200px);

        }

 @keyframes spin

        {

            from

            {

                transform: translateZ(-10em) rotateX(0) rotateY(0deg); -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg); -moz-transform: translateZ(-10em) rotateX(0) rotateY(0deg); -o-transform: translateZ(-10em) rotateX(0) rotateY(0deg);

            }

            to

            {

                transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); -moz-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); -o-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);

            }

        }

•                

•                

•                

•                

•                

•                

扫码关注我们

内容编辑：任志远

 图文排版：任志远