三维动态图集(基于CSS3transform动画)

效果预览：

实现思路：
多个图片进行旋转，主要需要确定几个图片的旋转点：

主要确定了旋转点，图片在旋转的过程中就不会出现乱跑的情况。同时为了可以看到图片在三维空间的旋转效果，需要给图片的父元素main添加perspective: perserve-3d使图片元素可以在3d空间进行显示。
实现代码：
html

<main>
    <img src="/images/2.PNG" alt="">
    <img src="/images/4.jpg" alt="">
    <img src="/images/dog.jpg" alt="">
    <img src="/images/1.jpg" alt="">
</main>

css

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2C3A47 ;
}

/*设置父盒子最初的样式*/
main {
    position: absolute;
    width: 200px;
    height: 100px;
    left: 50%;
    top: 50%;
    /*使父盒子在旋转的过程中子元素处于3d空间中*/
    transform-style: preserve-3d;
    /*设置旋转基点*/
    transform-origin: right center -200px;
    /*设置最初位置*/
    transform: perspective(900px) translate(-80%, -80%);
    transition: 10s;
}


/*设置图片的统一大小以及样式*/
main img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    /*设置旋转基点*/
    transform-origin: center center -200px;
}

/*设置每一个图片的旋转角度*/
main img:nth-child(1) {
    transform: rotateY(90deg);
}

main img:nth-child(2) {
    transform: rotateY(180deg);
}

main img:nth-child(3) {
    transform: rotateY(270deg);
}

main img:nth-child(4) {
    transform: rotateY(360deg);
}

/*当鼠标放置在页面上时，父盒子进行旋转操作来展示图片*/
body:hover main {
    transform: perspective(900px) translate(-80%,-80%) rotateX(-45deg) rotateY(1000deg);
}