H5C3綜合案例 之 旋轉木馬
阿新 • • 發佈:2020-12-21
技術標籤:css3
一、搭建HTML結構
<setion>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</setion>
二、CSS樣式
body { perspective: 1000px; } setion { width: 300px; height: 200px; margin 150px auto; transform-style: perspective-3d; animation: all 10s linear infinite; background: url(media/pig.jpg) no-repeat; } setion:hover { animation-play-state: paused; } @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } setion div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(media/dog.jpg) no-repeat; } section div:nth-child(1) { tranform: translateZ(300px); } section div:nth-child(2) { transform: rotate(60deg) translateZ(300px); } section div:nth-child(3) { transform: rotate(120deg) translateZ(300px); } section div:nth-child(4) { transform: rotate(180deg) translateZ(300px); } section div:nth-child(5) { transform:rotate(240deg) translateZ(300px); } section div:nth-child(6) { transform: rotate(300deg) translateZ(300px); }