用CSS3做一个网页水平翻转效果
2012-01-04 00:00
531 查看
有时候网站也要愚弄一下访客,比如愚人节。下面我给大家推荐个效果,就是整个页面左右颠倒了。css3 很强大,简单的几行代码就可以帮我们实现这个效果。
transform 可用于内联(inline)元素和块级(block)元素,它有几个属性值参数:
translate 位移:基于 X 和 Y 坐标重新定位元素,当使用一个参数时表示 X 轴和 Y 轴的参数相同,效果类似 position:relative 。
scale 缩放:可以让任一元素变大、变小。它使用一个或者两个正数和负数以及小数作为参数,当使用一个参数时表示 X 轴和 Y 轴的缩放相同。
rotate 旋转:通过传递一个度数值来转动一个对象。
skew 倾斜:参数是度数,当使用一个参数时表示 X 轴和 Y 轴的参数相同。
matrix 矩阵变换:基于 X 和 Y 坐标重新定位元素,它使用 6 个参数。
至于 IE,虽然不支持 transform,但 IE 的 fliph 滤镜能实现这样的效果。如果你也想愚弄一下你的访客,不妨像美团网一样,把下面的代码加到网页中。
transform(变形)和transform-origin(变形原点)的说明:
目前这两个属性得到了除去ie以外各个主流浏览器webkit,firefox,opera的支持,属性名分别为 -webkit-transform,-moz-transform,-o-transform;
transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用;
语法:-moz-transform-origin: [ <percentage> | <length> | left | center | right ][ <percentage> | <length> | top | center | bottom ] ?
transform-origin接受两个参数,它们可以是百分比,em,px等具体的值,也可以是left,center,right,或者 top,center,bottom等描述性参数 ;
更具体的用法可以参照网上其它资料吧。
本文地址:http://www.nowamagic.net/librarys/veda/detail/1223,欢迎访问原出处。
效果演示
<style type="text/css"> html { filter: fliph; /* for ie */ } body { transform: rotateY(180deg); /* css3 */ -moz-transform:skew(0deg, 180deg) scale(-1, 1); /* for ff */ -webkit-transform: rotateY(180deg); /* for chrome and safari */ -o-transform:skew(0deg, 180deg) scale(-1, 1); /* for opera */ overflow-x:hidden; } </style>
transform 可用于内联(inline)元素和块级(block)元素,它有几个属性值参数:
translate 位移:基于 X 和 Y 坐标重新定位元素,当使用一个参数时表示 X 轴和 Y 轴的参数相同,效果类似 position:relative 。
scale 缩放:可以让任一元素变大、变小。它使用一个或者两个正数和负数以及小数作为参数,当使用一个参数时表示 X 轴和 Y 轴的缩放相同。
rotate 旋转:通过传递一个度数值来转动一个对象。
skew 倾斜:参数是度数,当使用一个参数时表示 X 轴和 Y 轴的参数相同。
matrix 矩阵变换:基于 X 和 Y 坐标重新定位元素,它使用 6 个参数。
至于 IE,虽然不支持 transform,但 IE 的 fliph 滤镜能实现这样的效果。如果你也想愚弄一下你的访客,不妨像美团网一样,把下面的代码加到网页中。
transform(变形)和transform-origin(变形原点)的说明:
目前这两个属性得到了除去ie以外各个主流浏览器webkit,firefox,opera的支持,属性名分别为 -webkit-transform,-moz-transform,-o-transform;
transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用;
语法:-moz-transform-origin: [ <percentage> | <length> | left | center | right ][ <percentage> | <length> | top | center | bottom ] ?
transform-origin接受两个参数,它们可以是百分比,em,px等具体的值,也可以是left,center,right,或者 top,center,bottom等描述性参数 ;
更具体的用法可以参照网上其它资料吧。
本文地址:http://www.nowamagic.net/librarys/veda/detail/1223,欢迎访问原出处。
相关文章推荐
- 使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
- 使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
- CSS3之图片3D翻转效果(网页效果--每日一更)
- 使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
- 分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容
- LinearLayout中实现水平方向上的两个textview一个居左,一个居右的效果
- HTML5+CSS3 做一个灵动的动画 TAB 切换效果
- 用css3制作一个搜索框效果
- 使用jq和flip插件来做了一个幻灯片翻转效果小demo
- 使用jQuery和CSS3创建一个全屏幕幻灯效果
- 使用CSS3 backface-visibility:hidden;属性制作翻转动画效果
- 图片触及翻转效果 css3
- css3 实现纸带翻转效果
- css3实现色子自动翻转效果
- 一个JS函数搞定网页标题闪动效果
- 使用Bootstrap编写一个简单的网页轮播图效果
- 从外国html5网站上扒来一个鼠标经过的css3 效果,感觉很不错
- 一个简单的全屏图片上下打开显示网页效果示例
- CSS3实现3D魔方翻转网页动画特效
- 一个非常赞的网页背景效果——canvas-nest