CSS3 让图片镜像对称

1、HTML代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>test</title>
 5 </head>
 6 <body>
 7 <img src="images/left.png">
 8 <img src="images/left.png" class="flip-horizontal"/>
 9 <img src="images/left.png" class="flip-vertical" />
10 </body>
11 </html>

2、CSS代码

 1 .flip-horizontal {
 2 -moz-transform: scaleX(-1);
 3 -webkit-transform: scaleX(-1);
 4 -o-transform: scaleX(-1);
 5 transform: scaleX(-1);
 6 filter: fliph; /*IE*/ }
 7 .flip-vertical {
 8 -moz-transform: scaleY(-1);
 9 -webkit-transform: scaleY(-1);
10 -o-transform: scaleY(-1);
11 transform: scaleY(-1);
12 filter: flipv; /*IE*/ }

时间： 2024-10-25 01:27:35

CSS3 让图片镜像对称的相关文章

CSS3 实现图片上浮动画（转载）

CSS3 实现图片上浮动画 .gist { width:220px; height:130px; background-image: url(2.jpg); background-repeat:no-repeat; border:5px solid green; background-position:50% 50%; transition:background-position 2s; -moz-transition:background-position 2s; /* Firefox 4 *

jQuery/CSS3实现图片层叠展开特效

这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.主要由HTML.CSS以及jQuery代码组成. HTML代码: 把要用到的小图片列出来,HTML结构非常简单. <div id="page_wrap">  <div class="image_stack" style="margin-left:600px"> <img id="

CSS3 边框图片

CSS3 边框图片通过 CSS3 的 border-image 属性,可以使用图片来创建边框:border-image是用来代替border-style的,即border的大小取决于. 而且有border-image的侧边就没有border-shadow的什么事.哈哈,他俩冲突.注意,border-image不占用页面位置(他是脱离文档流的!!!). - 实现原理 - 参数解析 - - 图片切片border-image-slice - - 边框图片宽度border-image-width -

纯css3实现图片三角形排列

当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 在线预览源码下载实现的代码. html代码: <div class='container'> <div class='wrap'> <div class='crop'> <img src='128.jpg'> </div> </div> <

使用纯css3实现图片轮播

<!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> <meta charset="utf-8" /> <meta name="description" content="飛天网事,WEB前端开发,纯css3代码图片轮播,HTML5+CSS3精彩案例" /> <meta name=

第八十节，CSS3边框图片效果

CSS3边框图片效果学习要点: 1.属性初探 2.属性解释 3.简写和版本本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样,边框就可以自定义了. 1.border-image-source //引入背景图片地址 2.border-image-slice

JS+css3实现图片画廊效果总结

最近学习一个在线小项目,用JS+css3实现图片画廊的效果,具体效果可以点击以下链接查看: http://1.danielcv.sinaapp.com/ 案例中主要用到一些新的CSS3效果比如:1.3D视图位置设置和子元素3D支持 -webkit-perspective:800px;/*若设置为0px则不支持3D透视功能*/ -webkit-transform-style:preserve-3d; 2.翻转为不可见时隐藏 -webkit-backface-visibility:hidden; 3

纯CSS3实现图片展示特效

本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能.而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无比的顺滑. 观看演示 HTML代码通过上的演示,估计你已经能猜到,它的HTML结果应该是一个父元素里包含多个子元素,没错:这里用的是一个ol和其子元素li. CSS代码 CSS代码要实现的动作就是当鼠标悬停时让宽度发生变化. 非常简单的几段CSS代码就能实现我们要求的动作,但这里有几个事情需要注意

CSS3之图片3D翻转效果(网页效果--每日一更)

今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:http://localhost:63342/webfront/PC/rotate.html 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性.这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果.详情请看代码. HTML结构: 1 <div id="content"> 2 <div