CSS旋转&翻转，兼容方案

2019独角兽企业重金招聘Python工程师标准>>>

CSS旋转&翻转，兼容方案 地址：http://www.zhangxinxu.com/wordpress/?p=1637 一、CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善，对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下： /水平翻转/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /IE/ filter:FlipH; }

/垂直翻转/ .flipy { -moz-transform:scaleY(-1); -webkit-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); /IE/ filter:FlipV; } 其中，就目前而言，对于基于webkit核心的浏览器，如Chrome以及Safari，实现元素的垂直翻转或是水平翻转也可以使用如下样式： /水平翻转/ .flipx { transform: rotateY(180deg); }

/垂直翻转/ .flipy { transform: rotateX(180deg); } 注意： 水平翻转或垂直翻转不同于旋转180度。前者以轴为镜像，后者以点为镜像。 如果是对称元素，旋转180度和翻转的显示效果基本上就是一致的，但是，非对称元素就会看到明显差异。 对于后面提到的目前仅webkit核心浏览器支持的rotateY(180deg)，这里有个大写的Y。我们都知道Y表示纵轴，所以我们可能会误以为这里实现的是垂直翻转，其实非也，这里的Y表示元素以纵轴为镜像翻转，也就是水平翻转了。 由于这种水平或是垂直翻转性质的东西基本上类似于镜像拷贝，于是，我们在web制作的时候，一旦遇到对称出现的元素的时候，我们只需要处理一个元素就可以了，然后另外一个直接翻转使用下

CSS代码，高级浏览器使用transform，ie用滤镜实现。 1 /水平翻转/ 2 .flipx { 3 -moz-transform:scaleX(-1); 4 -webkit-transform:scaleX(-1); 5 -o-transform:scaleX(-1); 6 transform:scaleX(-1); 7 filter:FlipH(); 8 } 9 /垂直翻转/ 10 .flipy { 11 -moz-transform:scaleY(-1); 12 -webkit-transform:scaleY(-1); 13 -o-transform:scaleY(-1); 14 transform:scaleY(-1); 15 filter:FlipV(); 16 } 17 /顺时针旋转90度/ 18 .rotate90 { 19 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 20 -moz-transform: rotate(90deg); 21 -o-transform: rotate(90deg); 22 -webkit-transform: rotate(90deg); 23 transform: rotate(90deg); 24 } 25 /顺时针旋转180度/ 26 .rotate180 { 27 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 28 -moz-transform: rotate(180deg); 29 -o-transform: rotate(180deg); 30 -webkit-transform: rotate(180deg); 31 transform: rotate(180deg); 32 } 33 /顺时针旋转270度/ 34 .rotate270 { 35 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 36 -moz-transform: rotate(270deg); 37 -o-transform: rotate(270deg); 38 -webkit-transform: rotate(270deg); 39 transform: rotate(270deg); 40 }

转载于:https://my.oschina.net/markyun/blog/162011