本文介绍了一个使用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>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
