H5学习之制作照片立方体

黄良钵

分类: 程序开发 766 1

H5学习之制作照片立方体

这个立方体听好玩的,照片来着网络,如有侵权,请联系我删除,谢谢。

代码在下:

<html>

<head>

    <meta charset="UTF-8">

    <title>立方体</title>

    <style>

        body{

            margin: 0;

            background-color: black;

            height: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

            perspective: 3000px;

        }

        main{

            width: 300px;

            height: 300px;

            background-color: red;

            position: relative;

            transform-style: preserve-3d;

            animation: 10s spin linear infinite;

        }

        main div{

            width: 100%;

            height: 100%;

            border: 1px solid yellow;

            position: absolute;

        }

        .font{

            background-image: url(1.JPG);

            transform: translateZ(150px);

        }

        .back{

            background-image: url(2.JPG);

            transform: translateZ(-150px);           

        }

        .left{

            background-image: url(3.JPG);

            transform: rotateY(90deg)translateZ(150px);

        }

        .right{

            background-image: url(4.JPG);

            transform: rotateY(90deg)translateZ(-150px);

        }

        .top{

            background-image: url(5.JPG);

            transform: rotateX(90deg)translateZ(150px);

        }

        .bottom{

            background-image: url(6.JPG);

            transform: rotateX(90deg)translateZ(-150px);

        }

        @keyframes spin{

            0%{

                transform: rotateX(0)rotateY(0);

            }

            100%{

                transform: rotateX(360deg)rotateY(360deg);

            }

        }

    </style>

</head>

<body>

    <main>

        <div class="font"></div>

        <div class="back"></div>

        <div class="left"></div>

        <div class="right"></div>

        <div class="top"></div>

        <div class="bottom"></div>

    </main>

</body>

</html>

素材下载:2017-03-20 lifangti.tar

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
align-items、Flex、Flex布局、H5学习、justify-content

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 1 条评论关于 “H5学习之制作照片立方体”

Loading...