CSS3旋转寿司做法教程

CSS3旋转寿司是一种让菜单或文字以美观的方式滚动展示的特效。下面简单介绍该特效的实现：

.sushi {
    position: relative;
    overflow: hidden;
}
.sushi-item {
    position: absolute;
    animation: rotate 10s linear infinite;
}
@keyframes rotate {
    0% {
        transform: rotateY(0deg);
    }
    25% {
        transform: rotateY(90deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    75% {
        transform: rotateY(270deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

首先使用relative定位的容器元素需要使用overflow:hidden，使得子元素可以被裁剪。

接着每一个要展示的元素都需要使用absolute定位，并使用animation属性来指定动画。

最后定义旋转动画，使用@keyframes定义从0%到100%时的旋转度数。

在实际使用时，可以控制元素数量以及各自的内容，并且可以使用js实现滚动过程中的交互效果。

上述代码简单易懂，同时使用灵活。可以根据需要修改动画时间和旋转度数，以达到更好的展示效果。