具体效果图如下：
主要用到的技术除了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如何让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 ...
-
css如何使背景图片水平居中
CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...
随机推荐
-
为川师大女生支招 15年如何还200W
就在昨儿一条新闻火遍全网,川师大21岁女生樊师贝发帖称,希望有人借她200万,为父母在城里买房15年还清,至于利息“可以用后半生来陪伴你”.她说,六旬父亲要负担家用,哥哥啃老,而她目前一分钱都还没挣到 ...
-
Project Serve 2013部署方法
在线版Project2013部署手册 服务器环境要求 系统:windows server 2008r2.windows server2012x64 Sharepoint 2013 内存至少16GB,最 ...
-
python学习-爬虫
转载自 静觅的博客 最普通下载网页 import urrlib2 response = urllib2.urlopen("http://www.baidu.com") print ...
-
UVALive 6264 Conservation --拓扑排序
题意:一个展览有n个步骤,告诉你每一步在那个场馆举行,总共2个场馆,跨越场馆需要1单位时间,先给你一些约束关系,比如步骤a要在b前执行,问最少的转移时间是多少. 解法:根据这些约束关系可以建立有向边, ...
-
BZOJ 1816 扑克牌
WA的我怀疑人生.. 发现原来是循环中间就要break掉,不然爆int. 总感觉这题可以直接构造啊.. #include<iostream> #include<cstdio> ...
-
缩放系列（三）：一个可以手势缩放、拖拽、旋转的layout
弄了一个下午,终于搞出来了,PowerfulLayout 下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像b ...
-
2018-11-23 手工翻译Vue.js源码:尝试重命名标识符与文本
续前文: 手工翻译Vue.js源码第一步:14个文件重命名 对core/instance/索引中的变量, 方法进行重命名如下(题图): import { 混入初始化 } from './初始化' im ...
-
beanstalkd 说明文档
BEANSTALKD(1) BEANSTALKD(1) NAME beanstalkd - simple, fast work queue SYNOPSIS beanstalkd [options] ...
-
postgresql-递增uuid优点
递增uuid的优点: https://blog.2ndquadrant.com/on-the-impact-of-full-page-writes/ 减小wal生成
-
Spring和Quartz集成
本文转载自:http://blog.csdn.net/u010648555/article/details/54891264 Spring是一个很优秀的框架,它无缝的集成了Quartz,简单方便的让企 ...