HTML+CSS 制作翻牌效果[练习]

案例来源

本例来自CodingStartup的视频：HTML+CSS 制作翻牌效果

学到知识

1. 使用backface-visibility:hidden属性，可以在翻转元素的时候隐藏背面，否则显示镜像的背面(注意兼容问题)。
2. 可以使用position:absolute属性，重叠两个元素
3. 使用perspective 设定立体的透视深度，此属性有两种设置方法:
   1. 设置在执行动作的元素transform属性内：transform: perspective(1000px) rotateY(180deg)
   2. (本例)设置在执行动作的元素的父元素，使用perspective: 1000px
4. 在使用:hover伪类时，要尽量作用在执行动作的元素的父类，以免因为改变形状而影响效果的稳定。
5. 分享渐变效果的网站：Gradient Hunt

主要代码

html

    

        
COVER
        
BACK
    
    

        
COVER
        
BACK
    
    

        
COVER
        
BACK
    

css

        html {
            font-size: 22px;
        }

        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            background-image: linear-gradient( 90.5deg,  rgba(255,207,139,0.50) 1.1%, rgba(255,207,139,1) 81.3% );
        }

        .container {
            width: 300px;
            height: 400px;
            position: relative;
            perspective: 1000px;
        }

        .cover, .back{
            width: 100%;
            height: 100%;
            position: absolute;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transition: transform .25s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 1.6rem;
            text-shadow: .1rem .2rem .1rem rgba(0,0,0,.2);
            border-radius: .4rem;
            box-shadow: .2rem .3rem .4rem rgba(0,0,0,.1);
        }

        .cover {
            transform: rotateY(0deg);
            background-image: radial-gradient( circle 465px at -15.1% -25%,  rgba(17,130,193,1) 0%, rgba(67,166,238,1) 49%, rgba(126,203,244,1) 90.2% );
        }

        .container:hover .cover {
            transform: rotateY(180deg);
        }

        .back {
            transform: rotateY(-180deg);
            background-image: radial-gradient( circle 1294px at -15.5% 23.8%,  rgba(255,206,149,1) 0%, rgba(247,92,92,1) 44.9%, rgba(108,0,96,0.97) 93.8% );
        }

        .container:hover .back{
            transform: rotateY(0deg);
        }