css3 2d反转 |文字多了就省略号css3

/* 实现图片翻转 */
.flip-image{
width: 200px;
height: 200px;
/* 设置背面不可见 */
backface-visibility: hidden;
transform-style: preserve-3d;
/* 设置动画变化时间 */
transition: transform 0.5s;
}
.flip-image:hover{
/* 设置翻转角度 */
transform: rotateY(180deg);
}
/* 实现卡片翻转 */
.card{
width: 300px;
height: 200px;
perspective: 800px;
}
.card-wrapper{
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
/* 设置动画变化时间 */
transition: transform .5s;
}
.card-wrapper .card-front,
.card-wrapper .card-back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-wrapper .card-back{
transform: rotateY(180deg);
}
.card-wrapper:hover{
transform: rotateY(180deg);
}

以上是实现CSS3 2D反转效果的部分代码，其中用到了关键属性：backface-visibility、transform-style、transition、perspective等等。在实现2D反转效果的时候，大家需要注意细节，比如元素本身的宽高、是否开启了backface-visibility等等。通过这些关键属性的设置，大家可以实现非常酷炫的效果。