/card_flip_effect

css实现网页卡牌翻转效果

Primary LanguageCSS

css实现网页卡牌翻转效果

主要使用到以下几个属性

transform: rotateY(角度);

该属性可以使元素在Y轴上翻转指定角度;
例如:180deg就是翻转180度

backface-visibility: hidden;

该属性设置的是元素翻转过来去,背面是否隐藏,设置成hidden就是隐藏。

perspective: 800px;

该属性模拟人眼距离屏幕距离,用来体现3D效果

翻转效果应该加在:hover伪类上

还应加上transition过度效果