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%时的旋转度数。