简单的3D旋转相册

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;