CSS3动画变化——扑克牌效果

实现扑克牌翻牌效果

a)确定3D变换,及其他相关元素



    
        
        Title
        
    
    
        
"content">
"box">
"side front">

"side back">

你好

效果图:

CSS3动画变化——扑克牌效果_第1张图片

b)确定文字翻转、side的绝对定位并确定前后顺序

由上图可知图片翻转会让文字翻转180度,而不好辨认,所以需要再次翻转180度



    
        
        Title
        
    
    
        
"content">
"box">
"side front">

"side back">

你好

效果图:

CSS3动画变化——扑克牌效果_第2张图片

c)添加3D效果



    
        
        Title
        
    
    
        
"content">
"box">
"side front">

"side back">

你好

效果图:

CSS3动画变化——扑克牌效果_第3张图片
本文只用于个人学习和纪录

你可能感兴趣的:(CSS)