掀开图片显示介绍的css效果

摘要：效果是这样的主要运用到的等变换。这时候再看，效果已经差不多了，只要再同时增加一个向上的移动效果即可。所以最后的设置为这样掀开图片的效果基本上就搞定了。因为和是同级元素这时最明显的问题在于效果不稳定。

效果是这样的：

主要运用到CSS3的3D transform等变换。
做的时候遇到了两个问题：
一，图片掀开的效果
二，鼠标hover效果的稳定

挨着解决：

把动画拆开来看，感觉应该是有一个沿着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效果不稳定。

因为img在做变化，鼠标保持不动的时候，img可能已经不在鼠标的范围里面，就会产生晃晃荡荡忽上忽下的颤抖效果，看起来很不舒服。
最好的解决方法就是把hover设置在img和.overLayer共同的父元素.picBox身上，然后分别给他们设置样式。

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

}

（使用的scss）
这样效果就能稳定了。

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+数值+[tab键]。
比如实例中20个单词的文字段就是输入lorem20，然后敲个tab生成的。
2.Css控制单词大小写：

text-transform