利用css3过渡实现旋转二级菜单

最新推荐文章于 2025-08-20 12:54:00 发布

原创最新推荐文章于 2025-08-20 12:54:00 发布 · 548 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html+css

本文介绍了一个使用CSS实现的二级菜单旋转效果，通过transform属性和transition延迟实现动态展示。菜单项在鼠标悬停时从不可见状态旋转出来，形成了独特的视觉体验。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转</title>
		<style type="text/css">
			*{
				marign:0px;
				padding:0;
			}
			.d{
				height:200px;
				width:200px;
				background-color: darkcyan;
				opacity: 0;
				transform: rotateY(90deg);
				transition:all 0.6s;
			}
			.cs{
				height:200px;
				width:200px;
				background-color:red;
				perspective: 900px;
			}
			span{
				height:200px;
				width:200px;
				display: inline-block;
			}
			.cs:hover .d{
				opacity: 1; 
				transform: rotateY(0deg);
			}
			.cs:hover .d:nth-child(2){
				transition-delay: 100ms;
			}
			.cs:hover .d:nth-child(3){
				transition-delay: 230ms;
			}
			.cs .d:nth-child(2){
				transition-delay: 230ms;
			}
			.cs .d:nth-child(3){
				transition-delay: 100ms;
			}
			
			
			transform-origin
		</style>
	</head>
	<body>
	<div class="cs">
		<span >
			
		</span>
		<div class="d">
			想象是好看的二级菜单呀
		</div>
		<div class="d">
			1234456
		</div>
	</div>	
	
	
	</body>
</html>