3D转换练习前后翻转

r囧r小猫 2023-02-28 01:56 1阅读 0赞

效果图：  
![在这里插入图片描述][2020071914572311.gif]  
源代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { 
                position: relative;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                margin: 100px auto;
                perspective: 100px;
                transform-style: preserve-3d;
                transition: all 1s;
            }
            
            .pre, .aft { 
                position: absolute;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                margin: 100px auto;
                text-align: center;
                line-height: 200px;
                font-size: 32px;
                background-color: #ccc;
            }
            
            .aft { 
                background-color: #00a4ff;
                transform: rotateY(-180deg);
            }
            
            .box:hover { 
                transform: rotatey(180deg);
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="pre">正面</div>
            <div class="aft">背面</div>
        </div>
    </body>
    
    </html>

[2020071914572311.gif]: /images/20230209/0c09d9a7262d425c88a2759e0dc88486.png

发表评论取消回复

表情：

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

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

相关阅读

相关 3D转换练习前后翻转

效果图： ![在这里插入图片描述][2020071914572311.gif] 源代码： <!DOCTYPE html> <html lang="en"> <

r囧r小猫/ 2023年02月28日 01:56/ 0 赞/ 2 阅读

相关 2D转换之rotate练习

效果图： ![在这里插入图片描述][20200718162735892.gif] 源代码： <!DOCTYPE html> <html lang="en"> <

叁歲伎倆/ 2023年02月27日 14:59/ 0 赞/ 151 阅读

相关 HTML+CSS中的3D转换translate/rotate 旋转木马/翻转盒子/3D导航栏

前面我们已经介绍过了2D转换，那么我们即将学习的3D转换又是什么呢，它跟2D转换有什么不同呢？在我们日常生活的环境就是3D的，我们多看到的物体也都是3D的，而我们拍的照片就

小灰灰/ 2022年12月07日 11:40/ 0 赞/ 398 阅读

相关学习笔记——CSS 3D图片翻转

> 灵活运用CSS3中的transform属性以及perspective属性。 -------------------- 1.效果图： ![watermar

我不是女神ヾ/ 2022年11月12日 14:53/ 0 赞/ 229 阅读

相关 css3四棱柱3d翻转

本篇介绍了如何使用css3制作3d四棱柱翻转的效果，在页面点击按钮或其他场景下可参考使用相关css3参数 perspective transform-style t

水深无声/ 2022年10月05日 12:57/ 0 赞/ 201 阅读

相关 CSS3 2D/3D转换

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。

分手后的思念是犯贱/ 2022年09月21日 05:36/ 0 赞/ 313 阅读

相关 219.3D翻转登录表单

效果 (源码网盘地址在最后) ![9cef66c0d30b7c8312d2ebd8e2c95f39.gif][] 源码 index.html <!DOC

本是古典何须时尚/ 2022年09月09日 02:27/ 0 赞/ 148 阅读

相关 css3实现图片3d翻转效果

1.html部分 <body> <div class="main"> <div class="w"> <div clas

梦里梦外;/ 2022年06月17日 10:24/ 0 赞/ 326 阅读

相关 CSS 3D翻转卡片动画

原文链接： [http://caibaojian.com/3d-flip-card.html][http_caibaojian.com_3d-flip-card.html]

阳光穿透心脏的1/2处/ 2022年06月17日 02:19/ 0 赞/ 317 阅读

相关 3D翻转动画

大致效果 ![这里写图片描述][70] ![这里写图片描述][70 1] ![这里写图片描述][70 2] -------------------- （1）. 搭框

素颜马尾好姑娘i/ 2022年05月30日 11:08/ 0 赞/ 307 阅读