html中3D旋转木马动画的制作

踩了不少坑，这里都写出来就当给大家抛砖引玉了。

section {
            position: relative;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            animation: rotate 5s linear infinite;
            background: url("image/dogy1.jpg");
        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("image/dogy.jpg") no-repeat;
        }

        section div:nth-child(1) {
            transform: rotateY(0) translateZ(400px);
        }

        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(400px);
        }

        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(400px);
        }

        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(400px);
        }

        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(400px);
        }

        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(400px);
        }

        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(-360deg);
            }
        }

本身算是比较简单的，成品效果如下：

 

需要注意的有：

1、对于这样的旋转图，可以先进行【旋转】再进行【位移】，因为元素的参考坐标轴永远是他自己的中心处——如果不做修改的话。因此将其旋转后，再做位移就能完美得移动到想要的位置了。

譬如这里，外圈是有6张图片。一开始我想着是正六边形，那么第一张正对的图片就要往z轴移动 √3倍 边长了……

其余的图片虽然有对称能够根据这个推算出来移动距离，但也很难让他们看上去是一个【整体】，因此最好先旋转后位移。

 

2、最好嵌套一个父盒子

<div>子元素早已定好了位置，我们这里是对<section>元素进行旋转动画所以看上去是都在动——相对静止。

如果此时想要对 <section> 盒子本身作定位，抑或是在正常文档流之下布置其他元素，让页面变高，都会使得这个旋转动画变得十分鬼畜……（或许因为是沿着y轴旋转，所以和高度相关吧，如果是x轴水车式的动画的话，可能就和宽度有关了吧）

譬如预先设置了页面高度（或者说动画下方有其他元素撑高）

 

body {
            height: 2000px;
            perspective: 1000px;
        }

这里就是页面高度太高，以至于旋转变得很奇怪。如果你还把透视（perspective）设置得过低，那么整个动画将几乎覆盖整个页面……

 

同时，设置父盒子也便于使整个动画定位。如果你是给动画盒子<section>本身设置定位的话，定位将会失效。

总之设置一个父盒子就完事儿了。

.elevator {
            position: fixed;
            top: 100px;
            left: 100px;
            perspective: 300px;
        }

 

如果不需要看到旋转到后方图片得背面，那么可以给盒子设置 

section div {
            ……
            backface-visibility: hidden;
        }

这个属性会使得盒子背面面向屏幕时，隐藏自身。因为大部分时候图片也好文字也好，旋转过去后的背面实际上是镜面反转了，所以可以考虑隐藏。

 

 

翻转图片也是需要设置这个属性，才能让前面的这个翻转过去后消失，留下“之前的背面元素”

 

标签：动画,section,transform,旋转,rotateY,html,木马,div,3D
来源： https://www.cnblogs.com/ricardox3/p/16060926.html