摘要:具体效果图如下主要用到的技术除了翻转和定位,还用到了一个新的属性该属性主要是用来设定元素背面是否可见。具体的步骤如下写出页面主体,通过定位使两张图片叠加在一起设置第一张图片背面不可见添加旋转度最后给出完整代码
具体效果图如下:
主要用到的技术除了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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1769.html
摘要:宋体超链接边框宋体派生超链接宋体属性选择器超链接宋体动态超链接宋体图像翻转超链接宋体工具提示宋体给链接加上边框宋体在文章段落中加上超级链接宋体用背景图象添加记号宋体利用派生来影响链接宋体利用图片作为下划线1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; T...
摘要:道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的,使用自主研发的渲染引擎,和都使用网络用来 道阻且长啊TAT(前端面试总结) 前端 面试 笔试 面试 腾讯一面 1.浏览器工作原理 浏览器的主要组件包括: 用户界面- 包括地址栏、后退/前...
阅读 713·2023-04-25 19:43
阅读 3910·2021-11-30 14:52
阅读 3784·2021-11-30 14:52
阅读 3852·2021-11-29 11:00
阅读 3783·2021-11-29 11:00
阅读 3869·2021-11-29 11:00
阅读 3557·2021-11-29 11:00
阅读 6105·2021-11-29 11:00