所要掌握知識點

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>&nbsp;&nbsp;JAVA</h3>
                        <div class="content">
                            <article>
                                java是一個原生的面向物件程式設計的語言
                                學好java，找工作so easy
                                找好工作，就上58同城
                            </article
 
>
                        </div>
                    </li>   
                    <li>
                        <img src="img/android.png" />
                        <h3>Android</h3>
                        <div class="content">
                            <article
 
>
                                java是一個原生的面向物件程式設計的語言
                                學好java，找工作so easy
                                找好工作，就上58同城
                            </article>
                        </div>
                    </li>   
                    <li>
                        <img src="img/HTML5.png" />
                        <h3>&nbsp;&nbsp;HTML5</h3>
                        <div class="content">
                            <article>
                                java是一個原生的面向物件程式設計的語言
                                學好java，找工作so easy
                                找好工作，就上58同城
                            </article>
                        </div>
                    </li>
                    <li>
                        <img src="img/ios.png" />
                        <h3>&nbsp;&nbsp;&nbsp;&nbsp;IOS</h3>
                        <div class="content">
                            <article>
                                java是一個原生的面向物件程式設計的語言
                                學好java，找工作so easy
                                找好工作，就上58同城
                            </article>
                        </div>
                    </li>
                    <li>
                        <img src="img/hp.png" />
                        <h3>測&nbsp;&nbsp;試</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);
}