图片得翻转练习

最新推荐文章于 2022-04-28 10:58:46 发布

浩哥学习编程之路

最新推荐文章于 2022-04-28 10:58:46 发布

阅读量73

点赞数

分类专栏：平时小练习

本文链接：https://blog.csdn.net/m0_46978034/article/details/115597621

版权

平时小练习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本次练习使用到了transform旋转，定位还有个新属性1.backface-visibility; visible/hidden: 设置当所指定的元素被进行翻转等操作而使背面显示时，是否进行显示还是隐藏
要求：当鼠标经过图片得时候图片得背面进行一个翻转效果
结构：需要俩个元素前面一个后面一个默认情况下图片翻转后我们是能看到图片背面得所有如果不想看到就得使用backface-visibility; hidden属性来解决，
代码如下：

 <style>
        .container {
            width: 320px;
            height: 320px;
            position: relative;
        }
        
        .container>div {
            position: absolute;
            transition: all 2s;
            用于是否显示元素背面
            backface-visibility: hidden;
        }
        
        .front {
            width: 320px;
            height: 320px;
            background-color: red;
            font-size: 40px;
            line-height: 320px;
            text-align: center;
            color: #fff;
            transform: rotateY(180deg);
        }
        
        .container:hover .back {
            transform: rotateY(180deg);
        }
        
        .container:hover .front {
            transform: rotateY(0deg);
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="front">这是一个女孩子</div>

        <div class="back">
            <img src="img/an.jpg" alt="">
        </div>
    </div>
</body>

正面：
在这里插入图片描述
反面：

浩哥学习编程之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片得翻转练习

本次练习使用到了transform旋转，定位还有个新属性1.backface-visibility; visible/hidden: 设置当所指定的元素被进行翻转等操作而使背面显示时，是否进行显示还是隐藏要求：当鼠标经过图片得时候图片得背面进行一个翻转效果结构：需要俩个元素前面一个后面一个，代码如下： <style> .container { width: 320px; height: 320px;
复制链接

扫一扫