body { perspective:1000px; /* 透视要加到父级元素 */ } section { position:relative; width:300px; height:200px; margin:150px auto; transform-style:preserve-3d; animation:rotate 16s linear infinite; background:url("https://www.jq22.com/img/cs/500x500-1.png"); } section:hover { /* 鼠标移入时暂停动画 */ animation-play-state:paused; } @keyframes rotate { 0% { transform:rotateY(0deg); } 100% { transform:rotateY(360deg); } }section div { position:absolute; top:0; left:0; width:100%; height:100%; /* background:url("images/fc08.png") no-repeat; 这里背景图是开始做的参考,会被body里的img覆盖了,实际上没有用了 */ } section div:nth-child(1) { transform:translateZ(300px); } section div:nth-child(2) { transform:rotateY(60deg) translateZ(300px); /* 这里要先旋转好了,在移动距离 */ } section div:nth-child(3) { transform:rotateY(120deg) translateZ(300px); /* 这里要先旋转好了,在移动距离 */ } section div:nth-child(4) { transform:rotateY(180deg) translateZ(300px); /* 这里要先旋转好了,在移动距离 */ } section div:nth-child(5) { transform:rotateY(240deg) translateZ(300px); } section div:nth-child(6) { transform:rotateY(300deg) translateZ(300px); }
更新时间:2020-12-14 00:27:41