CSS动画/特效-透视旋转面片

html代码

    
    
    
    
    


    
    

        

        
black
    

css代码

.box {
    /* 透视添加在这个父级元素上 */
    perspective: 400px;
    position: relative;
    width: 200px;
    height: 300px;
    margin: 50px auto;
    text-align: center; 
    line-height: 300px;   
}
.box_front{
    background: linear-gradient(to right bottom,rgb(0, 202, 0),rgb(0, 143, 36));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    backface-visibility: hidden;
    box-shadow: 3px 3px 6px gray;
    transition: all 0.5s ease;
}
.box_black{
    background: gold;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform:rotateY(180deg) ;
    z-index: -1;
    border-radius: 10px;
    backface-visibility: hidden;
    box-shadow: 3px 3px 6px gray;
    transition: all 0.5s ease;
}
/* 两个元素分别添加动画 */
.box:hover .box_front{
    transform: rotateY(-180deg);
}
.box:hover .box_black{
    transform: rotateY(0deg);
}