CSS 实例之翻转图片
具体效果图如下：
主要用到的技术除了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:;
left:;
transition: all 1s;
}
3、设置第一张图片背面不可见
div img:first-child {
z-index:;
backface-visibility: hidden;
}
4、添加旋转180度
div:hover img {
transform: rotateY(180deg);
}
最后给出完整代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* backface-visibility */ div {
width: 250px;
height: 170px;
margin: 100px auto;
position: relative;
} div img {
width: 250px;
height: 170px;
position: absolute;
top:;
left:;
transition: all 1s;
} div img:first-child {
z-index:;
backface-visibility: hidden;
} div:hover img {
transform: rotateY(180deg);
}
</style>
</head> <body>
<div>
<img src="Images/b.jpg" alt="">
<img src="Images/c.jpg" alt="">
</div>
</body> </html>
CSS 实例之翻转图片的更多相关文章
- CSS实例：翻转图片、滚动图片栏、打开大门
CSS 翻转图片主要用到的技术除了3D翻转和定位 ,还用到了一个属性 backface-visibility:visable|hidden;该属性主要是用来设定元素背面是否可见. 效果图如下: 具体的 ...
- !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
- CSS实例
CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...
- 范仁义html+css课程---3、图片和超链接
范仁义html+css课程---3.图片和超链接 一.总结 一句话总结: img标签是图片标签,定义 HTML 页面中的图像 a标签是超链接标签,用于从一个页面链接到另一个页面. 1.img标签要点? ...
- CSS：CSS 实例
ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...
- CSS设置标签、图片放大、缩小、旋转、移动(tranform)
CSS设置标签.图片放大.缩小.旋转.移动(tranform) 1.缩小和放大属性(scale) 格式:tranform:缩小类型(数值): 注意:缩小和放大都是 scale : 其中的值(0~1)代 ...
- 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题
在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...
- CSS Image Sprite--网页图片应用处理方式
CSS Sprites简介 CSSSprites在国内很多人叫css精 灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片 ...
- nginx实现动态分离,解决css和js等图片加载问题
改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...
随机推荐
- Linux 部署 ASP.NET Core 的一些问题记录
异常错误: 关闭 IP6 #修改 vi /etc/sysctl.conf # 添加如下三条设置 net.ipv6.conf.all.disable_ipv6 = 1 net.ipv6.co ...
- Android_对android虚拟机的理解，包括内存管理机制垃圾回收机制。dalvik和art区别
虚拟机很小,空间很小,谈谈移动设备的虚拟机的大小限制 16M ,谈谈加载图片的时候怎么处理大图片的,outmemoryExceptionBitmapFactory.option 垃圾回收,没有引用的对 ...
- C#基础篇六飞行棋
飞行棋业务:我们要能够让2个玩家 在地图上 按照游戏规则 进行游戏 玩家类 变量:玩家位置,玩家名称,玩家标识,玩家是否在陷阱中 方法:投骰子,移动 地图类 变量:地图数据数组 方法:初始化地图数据, ...
- JavaScript 经典笔记
JavaScript 是弱类型的语言,所以编译器不能检测出类型错误. JavaScript 依赖于全局变量来进行链接.所有编译单元的所有顶级变量被撮合到一个被称为全局对象(the global obj ...
- apk的php解析
<?php/****************************************************** * Android APK File Parser * Author: ...
- 第一次项目上Linux服务器（五：CentOS7下Mysql数据库的安装与配置（转））
好像在CentOS 7系统中,默认安装的mysql是它的分支mariadb.所以不能像CentOS-6.3那样安装,如下: [root@izwz ~]# yum -y install mysql my ...
- mysql日志查看
https://www.2cto.com/database/201201/116116.html 是否启用了日志mysql>show variables like 'log_bin'; 怎样知道 ...
- Redis发布订阅机制
1. 什么是Redis Redis是一个开源的内存数据库,它以键值对的形式存储数据.由于数据存储在内存中,因此Redis的速度很快,但是每次重启Redis服务时,其中的数据也会丢失,因此,Redis也 ...
- 【转】CSS选择器笔记
作者: 阮一峰 日期: 2009年3月12日 来源:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html 去年我学jQuery的时候,曾经 ...
- WPF文字修饰——上、中、下划线与基线
我们知道,文字的修饰包括:空心字.立体字.划线字.阴影字.加粗.倾斜等.这里只说划线字的修饰方式,按划线的位置,我们可将之分为:上划线.中划线.基线与下划线.如图: 从上至下,分别为上划线(Overl ...