纯css实现图片翻转效果

所要掌握知识点

CSS样式

1.backface-visibility; visible/hidden: 设置当所指定的元素被进行翻转等操作而使背面显示时，是否进行显示还是隐藏
2.transform: rotateX(n deg)：设置当朝X轴方向旋转的角度
3.transition: css duration style; 

实现代码

前端布局实现代码

<div class="jskc">
                <ul>
                    <li>
                        <img src="img/Java.png" />  
                        <h3>  JAVAh3>
                        <div class="content">
                            <article>
                                java是一个原生的面向对象编程的语言
                                学好java，找工作so easy
                                找好工作，就上58同城
                            article>
                        div>
                    li>   
                    <li>
                        <img src="img/android.png" />
                        <h3>Androidh3>
                        <div class="content">
                            <article>
                                java是一个原生的面向对象编程的语言
                                学好java，找工作so easy
                                找好工作，就上58同城
                            article>
                        div>
                    li>   
                    <li>
                        <img src="img/HTML5.png" />
                        <h3>  HTML5h3>
                        <div class="content">
                            <article>
                                java是一个原生的面向对象编程的语言
                                学好java，找工作so easy
                                找好工作，就上58同城
                            article>
                        div>
                    li>
                    <li>
                        <img src="img/ios.png" />
                        <h3>    IOSh3>
                        <div class="content">
                            <article>
                                java是一个原生的面向对象编程的语言
                                学好java，找工作so easy
                                找好工作，就上58同城
                            article>
                        div>
                    li>
                    <li>
                        <img src="img/hp.png" />
                        <h3>测  试h3>
                        <div class="content">
                            <article>
                                java是一个原生的面向对象编程的语言
                                学好java，找工作so easy
                                找好工作，就上58同城
                            article>
                        div>
                    li>
                ul>
            div>

CSS样式实现代码

.container .jskc{
    margin-top:44px;
    width: 1341px;
    height: 500px;
}
.container .jskc ul{
    list-style-type: none;
    margin-top: 144px;
}
.container .jskc ul li{
    float: left;
    width: 208px;
    height: 311px;
    border: 3px solid #0099cc;
    border-radius: 8px;
    margin-left: 44px;
    transition: all .5s linear;
}
.container .jskc ul li img{
    position: relative;
    backface-visibility: hidden;
    margin-top: 60px;
    margin-left: 60px;
    width: 80px;
    height: 80px;
}
.container .jskc ul li h3{
    margin-left: 70px;
    margin-top: 44px;
    backface-visibility: hidden;
}
.container .jskc ul li:hover{
    transform-style: preserve-3d;
    transform: rotateX(180deg);
}
.container .jskc ul li .content{
    position: relative;
    top: -125px;
    transition: all .5s linear;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: rotateX(180deg);
}