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 ...
随机推荐
- Objective-C 字符串与数值互相转换
Convert NSString to int NSString *aNumberString = @"123"; int i = [aNumberString intValue] ...
- js便签笔记（8）——js加载XML字符串或文件
1. 加载XML文件 方法1:ajax方式.代码如下: var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObje ...
- Mybatis通过GNDL语法引用静态常量或者枚举类型
原因:mybatis 中mapper.xml 文件中需要静态常量的时候 使用: 先定义: public static String aa="aa"; ${@全路径类名称@静态变量| ...
- BackgroundWorker简单实用(简便的异步操作)
微软提供了一个快捷使用多线程的帮助类BackgroundWorker,能够快速创建一个新的线程,并能报告进度,暂停,以及在线程完成后处理别的任务. 1.BackgroundWorker类介绍 1.1. ...
- sqoop部署及使用
一.概述 sqoop是hive.hdfs.hbase等与RDMBS(mysql等)之间的沟通桥梁,主要通过JDBC与RDMBS进行交互.有两个版本sqoop1和sqoop2,sqoop1架构简单,使用 ...
- VMware12 克隆虚拟机并且重新分配ip、mac
记录如何快速拷贝一台虚拟机,并且重新分配IP.mac等方便自己做实验: 环境:VMWare12 .Redhat6.8 Step1.克隆虚拟机 虚拟机处于未打开状态,右击管理—>克隆 弹出克隆界 ...
- es6学习笔记4--数组
数组的扩展 Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据 ...
- java运行jar包时候加载指定目录的其他jar支持包
最近发生一个小故障,调试好的项目,发布成jar包后无法找到oracle的驱动,研究了一下解决了.记录一下. 写了一个run.sh脚本 #!/bin/bash cd ~ cd app nohup jav ...
- Navicat相关应用及注意事项
一.MySQL数据类型 1.数值型 SMALLINT: 2个字节 INT: 4个字节 // age int(10) INTEGER:INT的同义词 BIGINT : 8个字节 FLOAT : ...
- python与中文的那点事
目录 python与中文的那点事 1. utf-8/gbk/unicode/ASCII 2.各种编码之间的转换 3. 统计字符串中数字,字母,汉字的个数 python与中文的那点事 在学习python ...