| 在百度搜索里输入“翻转、反转、跳动、闪烁、旋转、黑洞”等词语的时候，页面也会神奇的产生了相应的效果；这其实是百度针对个别关键词的个性化体验，就是让用户真正体会到什么是旋转，翻转、反转等等动作，是一种智能的识别技术。 那么这种神奇的效果是如果实现的呢，下面给大家简单地实现翻转这个效果 效果演示：
<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)元素，它有几个属性值参数： 1、translate 位移：基于 X 和 Y 坐标重新定位元素，当使用一个参数时表示 X 轴和 Y 轴的参数相同，效果类似 position:relative 。 2、scale 缩放：可以让任一元素变大、变小。它使用一个或者两个正数和负数以及小数作为参数，当使用一个参数时表示 X 轴和 Y 轴的缩放相同。 3、rotate 旋转：通过传递一个度数值来转动一个对象。 4、skew 倾斜：参数是度数，当使用一个参数时表示 X 轴和 Y 轴的参数相同。 5、matrix 矩阵变换：基于 X 和 Y 坐标重新定位元素，它使用 6 个参数。 至于 IE，虽然不支持 transform，但 IE 的 fliph 滤镜能实现这样的效果。 transform(变形)和transform-origin(变形原点)的说明： 目前这两个属性除去ie以外各个主流浏览器webkit，firefox，opera都支持，属性名分别为 -webkit-transform，-moz-transform，-o-transform; transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用； transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数;
文章来源 CODETC，欢迎分享，转载请注明地址：
http://www.codetc.com/article-74-1.html
|