摘要：效果是這樣的主要運用到的等變換。這時候再看，效果已經差不多了，只要再同時增加一個向上的移動效果即可。所以最后的設置為這樣掀開圖片的效果基本上就搞定了。因為和是同級元素這時最明顯的問題在于效果不穩(wěn)定。

效果是這樣的：

主要運用到CSS3的3D transform等變換。
做的時候遇到了兩個問題：
一，圖片掀開的效果
二，鼠標hover效果的穩(wěn)定

挨著解決：

把動畫拆開來看，感覺應該是有一個沿著X軸的旋轉，設置一下transform效果

    img{
            transform: rotateX(90deg);
        }

但是這樣看起來更像是圖片收縮了，并沒有在視覺上產生旋轉的效果。此時，需要在img的父元素上添加perspective屬性，更改它的透視位置。

.picBox{
    perspective:1000px;
    }

這時候再看，效果已經差不多了，只要img再同時增加一個向上的移動效果即可。所以最后img的transform設置為

img{
    transform: translateY(-320px) rotateX(90deg);
}

這樣掀開圖片的效果基本上就搞定了。
但是，由于最開始把hover設置在了img自己身上，要同時設置描述文本.overLayer，就要寫成

img:hover +.overLayer

（按慣性寫空格就不會起效果。因為img和.overLayer是同級元素）
這時最明顯的問題在于hover效果不穩(wěn)定。

因為img在做變化，鼠標保持不動的時候，img可能已經不在鼠標的范圍里面，就會產生晃晃蕩蕩忽上忽下的顫抖效果，看起來很不舒服。
最好的解決方法就是把hover設置在img和.overLayer共同的父元素.picBox身上，然后分別給他們設置樣式。

.picBox
    &:hover img{
        transform: translateY(-320px) rotateX(90deg);
        opacity: 0;
    }
    
    &:hover .overLayer{
        opacity: 1;
    }    

}

（使用的scss）
這樣效果就能穩(wěn)定了。

HTML

    
    
    
    
    


    

        
        

            
title here
            
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis labore molestiae magni, consequatur nesciunt expedita. Dicta placeat minus sint, culpa.
        
    
    
    

        
        

            
title here
            
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut pariatur excepturi, voluptatum consectetur facere commodi at distinctio iste sapiente necessitatibus.
        
    

CSS

body{
    background-color: #4e658b;
}

.picBox{
    width: 500px;
    height: 500px;
    position: relative;
    perspective:1000px;
    cursor: pointer;
    
    img{
        width: 100%;
        height: 100%;
        z-index: 5;
        
    }
    
    img,.overLayer{
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.6s ease-in-out;
    }
    
    &:hover img{
        transform: translateY(-320px) rotateX(90deg);
        opacity: 0;
    }
    
    &:hover .overLayer{
        opacity: 1;
    }    

}

.overLayer{
    width: 100%;
    height: 100%;
    color: aliceblue;
    background-color: #465176;
    opacity: 0;
    
    
    
    .title{
        text-align: center;
        text-transform: capitalize;
        padding-top: 70px;
    }
    
    .description{
        padding: 50px 30px;
    }
    
    .title:after,.description:after{
        content: "";
        width: 250px;
        border-bottom: 1px solid white;
        display: block;
        margin: 0 auto;
        padding-top: 50px;
        
    }
}

總結：樣式寫死了尺寸，導致整體縮放時很多地方都要重寫，下次要注意改成百分比的形式，或者設置變量，便于修改。

1.Emmet生成占位文字：lorem+數(shù)值+[tab鍵]。
比如實例中20個單詞的文字段就是輸入lorem20，然后敲個tab生成的。
2.Css控制單詞大小寫：

text-transform