css3翻转180 |如何用css制作简单的留言板

/* 翻转前的初始样式，这里大家以一个div元素为例 */
div {
width: 100px;
height: 100px;
background-color: #f00;
}
/* 添加鼠标悬停效果 */
div:hover {
transform: rotateY(180deg);
}

上述代码中，大家通过:hover伪类来为div元素添加了一个鼠标悬停效果。在鼠标悬停时，大家使用transform属性来实现翻转效果，其中rotateY()函数表示沿Y轴旋转，括号中的参数180deg表示旋转角度为180度。

需要注意的是，以上代码只能实现单一的翻转效果，如果想要实现更多样化的效果，可能需要组合使用其他属性和值。例如，大家可以添加perspective属性来设置元素的透视度，使得翻转效果更加逼真。

/* 添加透视度 */
div {
width: 100px;
height: 100px;
background-color: #f00;
perspective: 500px;
}
/* 添加翻转效果 */
div:hover {
transform: rotateY(180deg);
/* 下面这行代码用于解决火狐浏览器的bug，非必要 */
-moz-transform: rotateY(180deg); 
}

通过以上代码的添加，大家可以实现更生动、逼真的翻转效果，并且该效果在主流现代浏览器中均能良好地支持。