在网页设计中，hover效果可以增强用户体验，为用户提供更好的使用体验。而使用CSS3运用transform属性和transition属性可以实现可翻转的hover效果。
二、CSS3中的transform属性
transform属性是CSS3中用于改变元素形状、大小、位置的属性。transform属性有多种值，这里只讲述旋转rotate()和翻转scale()的使用，这两种功能是实现可翻转hover效果的核心。
1. 旋转rotate()
旋转只需要用到一个值rotate(deg)。其中deg表示旋转的度数，正数表示顺时针旋转，反之表示逆时针旋转。
2. 翻转scale()
翻转需要用到两个值scale(x,y)，其中x表示水平方向上的翻转程度，取值为-1或1，y表示垂直方向上的翻转程度，取值为-1或1。当x或y的值为-1时，表示将元素在该方向上进行翻转。
三、CSS3中的transition属性
transition属性能够控制元素在hover状态下的过渡效果。使用该属性可使元素从一种状态过渡到另一种状态。
transition属性需要设置两个值：过渡的属性和过渡的时间。如下：
transition: property duration;
其中property表示要过渡的CSS属性，duration表示过渡时间，其单位可以是s（秒）或ms（毫秒）。
四、代码实现
下面是一个hover翻转的实例：
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #fff;
}
.flip-card-back {
background-color: #f1f1f1;
transform: rotateY(180deg);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
其中，flip-card-inner表示整个卡片。两个子元素flip-card-front和flip-card-back分别表示正面和反面。
当hover在flip-card上时，就会触发翻转效果。
五、总结
使用CSS3中的transform属性和transition属性可以实现可翻转的hover效果，提升网站的用户体验。