纯css实现图片翻转效果

最新推荐文章于 2025-07-07 10:12:19 发布

19年，重新开始写

最新推荐文章于 2025-07-07 10:12:19 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5+css3 H5进阶前端特效 java-web开发文章标签： css 图片前端布局

本文链接：https://blog.youkuaiyun.com/qq_27905183/article/details/73554896

java-web开发同时被 3 个专栏收录

121 篇文章

订阅专栏

html5+css3

50 篇文章

订阅专栏

H5进阶

14 篇文章

订阅专栏

本文介绍如何使用 CSS 实现卡片式的 3D 翻转效果，包括 backface-visibility 和 transform 属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所要掌握知识点

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