纯css实现图片翻转效果

来源：互联网发布：韦德生涯场均数据编辑：程序博客网时间：2024/05/16 08:09

所要掌握知识点

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);}

阅读全文

0 0