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 ...
随机推荐
- 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- Log4j最佳实践
本文是结合项目中使用Log4j总结的最佳实践,非转载.网上可以找到的是这一篇<Log4j最佳实践>.本来Log4j使用是非常简单的,无需多介绍其用法,这只是在小型项目中:但在大型的项目中使 ...
- ubuntu-12.04.5下编译openjdk8
bash ./configure --with-target-bits=64 --with-boot-jdk=/usr/java/jdk1.7.0_80/ --with-debug-level=slo ...
- sql字符处理
--Description: 字符处理 --使用: 放到查询分析器里执行就可以了 --示例: select * from dbo.splitstr('12 44 45 50 56 87',' ') o ...
- 数据库设计 Step by Step (1)——扬帆启航
引言:一直在从事数据库开发和设计工作,也看了一些书籍,算是略有心得.很久之前就想针 对关系数据库设计进行整理.总结,但因为种种原因迟迟没有动手,主要还是惰性使然.今天也算是痛下决心开始这项卓绝又令我兴 ...
- Ajax初始接触
演示JS对象的属性,方法和事件的使用 (1)window.location.href (2)form.submit() <form action="" method=&quo ...
- 浅谈tcp socket的backlog参数
最近看netty源码碰到ChannelOption.SO_BACKLOG参数,通过跟踪代码发现其实是用于设置底层tcp socket的backlog参数,由于不了解这个参数,有必要彻底的理解一下. 底 ...
- OopMap介绍
摘自:http://blog.csdn.net/woaigaolaoshi/article/details/51439227 在HotSpot中,对象的类型信息里有记录自己的OopMap,记录了在该类 ...
- redis学习（一） redis的介绍与安装
redis简单介绍 redis全称remote-dictionary-server 直译为远程字典服务器, 是一个高性能的key-value存储系统,也被称为数据结构服务器,因为其所存储的数据值(va ...
- mysql索引总结(2)-MySQL聚簇索引和非聚簇索引
mysql索引总结(1)-mysql 索引类型以及创建 mysql索引总结(2)-MySQL聚簇索引和非聚簇索引 mysql索引总结(3)-MySQL聚簇索引和非聚簇索引 mysql索引总结(4)-M ...