CSS 实例之翻转图片

番茄西红柿发布于2019-04-23 13:21 / 965人阅读

摘要：具体效果图如下主要用到的技术除了翻转和定位，还用到了一个新的属性该属性主要是用来设定元素背面是否可见。具体的步骤如下写出页面主体，通过定位使两张图片叠加在一起设置第一张图片背面不可见添加旋转度最后给出完整代码

具体效果图如下：

主要用到的技术除了3D翻转和定位，还用到了一个新的属性 backface-visibility：visable|hidden;

该属性主要是用来设定元素背面是否可见。

具体的步骤如下：

1、写出页面主体，

 <div>
        <img src="Images/b.jpg" alt="">
        <img src="Images/c.jpg" alt="">
    div>

2、通过定位使两张图片叠加在一起

  div img {
            width: 250px;
            height: 170px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }

3、设置第一张图片背面不可见

 div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }

4、添加旋转180度

 div:hover img {
            transform: rotateY(180deg);
        }

最后给出完整代码





    
    
    
    Document

View Code

混合云 idc机房托管 css实例 css实例教程图片css css图片自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1769.html

24, CSS 构造超链接

摘要：宋体超链接边框宋体派生超链接宋体属性选择器超链接宋体动态超链接宋体图像翻转超链接宋体工具提示宋体给链接加上边框宋体在文章段落中加上超级链接宋体用背景图象添加记号宋体利用派生来影响链接宋体利用图片作为下划线1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; T...

番茄西红柿 2019-04-23 11:42 评论0 收藏0
HTML5+CSS3整体回顾

摘要：设置文字的描边制表符的长度当前行超过指定容器的边界时是否断开转行规定自动换行的处理方法是否使用一个省略标记标示对象内文本的溢出默认值无省略号当对象内文本溢出时显示省略标记。或表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。转载请声明原文链接这篇文章主要总结H5的一些新增的功能以及一些基础归纳，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考...

xingqiba 2019-08-05 10:16 评论0 收藏0
Python 旋转、翻转图片（附代码） | Python工具类

摘要：目录前言前言环境依赖环境依赖代码代码总结总结前言本文提供对图片旋转，垂直翻转水平翻转等操作工具方法，可以直接使用。输出路径避免文件名冲突，使用作为文件名。图片后缀校验目前只做了两种格式校验，如果需要，自行补充。目录前言环境依赖代码总结前言本文提供对图片旋转，垂直翻转、水平翻转...

saucxs 2021-11-19 09:40 评论0 收藏0
图片遮罩翻转

摘要：效果展示代码。代码以一个为单位，在其周围生成个相同的遮罩。主要是的动画不支持翻转，只能通过来做，需要以边为单位翻转。当所有关联起来的时时候，记录上一个翻转方向，达到连贯性不触发获得相对于中心点的，坐标获得斜率到之间的数 showImg(https://segmentfault.com/img/bV8BTx?w=711&h=656); html代码。 ...

shaonbean 2019-08-22 16:21 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

lemanli 2019-08-02 15:57 评论0 收藏0