HTML——3D旋转+动画 旋转木马案例

旋转木马案例

效果
外面的图片围绕中间的图片旋转，鼠标悬停停止旋转。

思路
不用鼠标悬停就能实现旋转需要用到动画来实现，@keyframes内设置transform: rotateY();当鼠标悬停时动画停止则利用伪类选择器:hover实现。要想实现动画停止效果，则需要用到播放状态animation-play-state；（默认running）鼠标放在上面就会停止用paused。

代码

<section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

先为大盒子section设置宽高和背景

section {
            position: relative;
            width: 276px;
            height: 271px;
            margin: 200p