css3 动画 垂直旋转 |css nav index

.box {
width: 100px;
height: 100px;
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
animation: rotateY 2s infinite;
}
.box:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #f00;
opacity: 0.5;
transform: translateZ(-50px);
}
.box:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #0f0;
opacity: 0.5;
transform: rotateY(90deg) translateZ(-50px);
}
@keyframes rotateY {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}

上面的代码演示了如何使用 CSS3 动画实现垂直旋转的效果，主要是通过 transform 属性来控制元素的旋转和平移。其中 .box 代表旋转的元素， :before 和 :after 分别代表旋转元素的两个面。

通过设置 transform 属性，可以将元素沿着 X 轴或 Y 轴旋转或平移，同时可以保持 3D 效果。而通过设置 animation 属性并使用关键帧动画，可以实现元素的循环旋转动画。

总的来说，使用 CSS3 动画实现垂直旋转效果并不复杂，只需要掌握好 transform 和 animation 属性的使用即可。