CSS学习案例（12）：3D卡片翻转

	<div class="container">
        <div class="one">
            <div class="contents">
                <h1>Else</h1>
                <span>Queen of Arendelle</span>
            </div>
        </div>
        <div class="two">
            <div class="contents">
                <h1>Irelia</h1>
                <span>Guardian of Ai ouniya</span>
            </div>
        </div>
    </div>

*{margin: 0;padding: 0;}

html{
    font-size: 14px;
}

body{
    height: 100vh;width: 100vw;
    background: #2c3e50;
    font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    height: 400px;width: 290px;
    position: relative;
}

.one, .two{
    position: absolute;
    width: 100%;height: 100%;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    transform-style: preserve-3d;
    perspective: 1000px;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s ease-out;
}

.container .one{
    background-image: linear-gradient(to right,#00000070,#00000070), url(/img/95ACF74AB0E3067CA55FF4D791A2F883.jpg);
}
.container .two{
    background-image: linear-gradient(to right,#00000070,#00000070), url(/img/9A6659F36EC834E7F961962E19702B05.jpg);
    transform: rotateY(180deg);
}

.contents{
    transform: translateZ(100px) translate(20px,100px);
    backface-visibility: hidden;
    
}

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

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

视频参考：学习：HTML&CSS制作3D卡片翻转