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

我不是女神ヾ 2022-11-12 14:53 216阅读 0赞

> 灵活运用CSS3中的transform属性以及perspective属性。

###  ###

--------------------

###  1.效果图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]

### 2.代码： ###

<div class="box">
                <div class="box1 box2">正</div>
                <div class="box1 box3">反</div>
            </div>

.box {
                    margin: 100px auto;
                    position: relative;
                    width: 400px;
                    height: 200px;
                    border: 10px solid #000000;
                    position: relative;
                    perspective: 600px;
                }
                .box1 {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 400px;
                    height: 200px;
                    line-height: 200px;
                    text-align: center;
                    font-size: 40px;
                    color: white;
                    backface-visibility: hidden;
                    transition: all .6s;
                }
                .box2 {
                    transform: rotateY(0deg);
                    background-color: #0000FF;
                }
                .box:hover .box2 { transform: rotateY(180deg); }
                .box3 {
                    transform: rotateY(-180deg);
                    background-color: #006722;
                }
                .box:hover .box3 { transform: rotateY(0deg); }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221022/2c0869a08e474e858db145c73d818aad.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关学习笔记——CSS 3D旋转木马实现

> 灵活运用CSS3中的transform属性，perspective属性以及transition属性实现旋转木马动画效果。 > > -----------------

r囧r小猫/ 2022年11月12日 13:59/ 0 赞/ 358 阅读

相关学习笔记——CSS 3D效果实现立方体

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

傷城~/ 2022年11月12日 13:57/ 0 赞/ 204 阅读

相关 css3四棱柱3d翻转

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

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

相关纯css3响应式3d翻转菜单

前端开发whqet,csdn,王海庆,whqet,前端开发专家周末快乐哈，今天来看一个纯CSS3实现的3d翻转菜单，3d响应式菜单，希望对大家有所帮助。 ![SouthE

悠悠/ 2022年08月26日 15:20/ 0 赞/ 234 阅读

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

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

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

相关 CSS 3D翻转卡片动画

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

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

相关 3D翻转动画

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

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

相关简单CSS3+JQ实现图片的3D翻转

我的博客已经全部迁移至新地址，欢迎收藏我的[个人博客][Link 1]。推荐一个自己的博客：[JS -- 手动实现数组原生方法][JS --] 没想到刚开始没两天就突然断

川长思鸟来/ 2022年05月24日 20:36/ 0 赞/ 270 阅读

相关 css实现3D立体视频翻转动画

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

ゝ一世哀愁。/ 2021年07月26日 15:35/ 0 赞/ 493 阅读