css3 菜单翻动效果 |css div 内容右对齐

代码1：
.menu {
position: relative;
z-index: 1;
display: inline-block;
background: #fff;
box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
border-radius: 5px;
padding: 10px;
transition: all 0.3s ease-in-out;
}
.menu:hover {
transform: rotateY(180deg);
}

上面的代码使用transform属性来实现菜单的翻转效果，当鼠标悬停在菜单上时，菜单会180度翻转。下面是另一种实现CSS3菜单翻动效果的示例代码：

代码2：
.menu {
position: relative;
z-index: 1;
display: inline-block;
background: #fff;
box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
border-radius: 5px;
padding: 10px;
overflow: hidden;
}
.menu:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: rgba(0,0,0,0.8);
transform: rotateY(-180deg);
transition: all 0.3s ease-in-out;
}
.menu:hover:before {
transform: rotateY(0deg);
}

上面的代码使用:before伪类来实现菜单的翻转效果，当鼠标悬停在菜单上时，菜单会从背面翻转。