CSS3特效之翻转

港控/mmm° 2022-07-11 07:46 186阅读 0赞

![这里写图片描述][SouthEast]

**鼠标悬停，图片翻转**

![这里写图片描述][SouthEast 1]

<!doctype html>
    <html>
         <head>
                <meta charset="UTF-8">
                <meta name="Generator" content="EditPlus®">
                <meta name="Author" content="">
                <meta name="Keywords" content="">
                <meta name="Description" content="">
                <title>Document</title>
                <style> #container:before{ content:""; display:table; } #container{ width:250px; height:250px; border-radius:50%; background:-webkit-radial-gradient(circle,#FFFFFF,#F4F4F4,#D3D3D3); margin:auto; margin-top:100px; } #wrap{ -webkit-perspective:500px; width:200px; height:200px; border-radius:50%; background-color:#fff; margin:auto; margin-top:25px; } #images{ -webkit-transform-style:preserve-3d; -webkit-transition:1.5s; position:relative; } #wrap:hover #images{ -webkit-transform:rotateY(180deg); } #images>div{ position: absolute; -webkit-backface-visibility:hidden; } div.back { -webkit-transform:rotateY(180deg); } img{ width:200px; height:200px; border-radius:50%; } </style>
         </head>
         <body>
            <div id="container">
                <div id="wrap">
                    <div id="images">
                        <div class="front">
                            <img src="images/huan.jpg"/>
                        </div>
                        <div class="back">
                            <img src="images/love.jpg">
                        </div>
                    </div>
                </div>
            </div>
         </body>
    </html>

[SouthEast]: /images/20220711/d520f30abe414a3ea1fcead79b17dd52.png
[SouthEast 1]: /images/20220711/178f73a630c64084964d4548e9332b7c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3动画特效之字节跳动

[20190920165351160.gif][] 代码如下： <!DOCTYPE html> <html> <head> <...

迈不过友情╰/ 2024年04月20日 09:16/ 0 赞/ 14 阅读

相关如何用CSS3来实现卡片的翻转特效

CSS3实现翻转(Flip)效果动画效果 ![format_png][] ![format_png 1][] 效果分析当鼠标滑过包含块时，

蔚落/ 2022年11月25日 00:41/ 0 赞/ 170 阅读

相关 CSS贺卡翻转动画js特效

[下载地址][Link 1]css3绘制的贺卡样式，鼠标悬停带翻转特效。 ![1631561619.png][] dd: [Link 1]: https://yy123

桃扇骨/ 2022年09月11日 11:12/ 0 赞/ 175 阅读

相关 189.箭头翻转特效

效果 (源码网盘地址在最后) ![8f39d39b4167377d001ecd4c82fa912b.gif][] 源码 <!DOCTYPE html>

墨蓝/ 2022年09月03日 12:17/ 0 赞/ 104 阅读

相关 css3 按钮翻转效果

css3 按钮翻转效果 ![css3 按钮翻转][css3] ![css3 按钮翻转][css3 1] ![css3 按钮翻转][css3 2] html

末蓝、/ 2022年09月03日 07:19/ 0 赞/ 210 阅读

相关 css3 3D旋转特效

最近自己的网站正在制作，由于是个人网站，所以我傲娇的抛弃了IE，痛快的用起了css3和html5的诸多特效，然而问题亦随之而来。这篇文章的主要讲解在使用css3的3D旋转的时候

「爱情、让人受尽委屈。」/ 2022年07月16日 06:28/ 0 赞/ 291 阅读

相关 CSS3 实现3D特效

CSS3 中的动画效果 transition animate transition主要是从一个属性平滑过渡到另一个属性，而animate则是结合关键帧技术，

朱雀/ 2022年07月13日 08:55/ 0 赞/ 264 阅读

相关 CSS3特效之翻转

![这里写图片描述][SouthEast] 鼠标悬停，图片翻转 ![这里写图片描述][SouthEast 1] <!doctype html> <html

港控/mmm°/ 2022年07月11日 07:46/ 0 赞/ 187 阅读

相关 CSS3 + JavaScript原生实现翻转特效

利用CSS3 动画： @keyframes 一个定义动画的属性具体在这里就不详细解释了，想要详细了解的可以访问下面这个网址： http://www.

太过爱你忘了你带给我的痛/ 2022年06月03日 06:07/ 0 赞/ 142 阅读

相关 css3实现流星雨特效

用到css3知识: radial-gradient 径向渐变， filter， transform， animation以及 nth-child选择器等

今天药忘吃喽~/ 2021年12月10日 08:37/ 0 赞/ 358 阅读