1500字范文 > CSS垂直翻转与水平翻转

CSS垂直翻转与水平翻转

时间：2021-07-16 15:18:48

相关推荐

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;}

这里可能会质疑？？ScaleY不是Y轴缩放的比例吗？为什么等于-1时会是翻转？是什么原理？

用数学思维解释下：

Scale要有相对点的，假设相对的点是（x0，y0）原来控件上某点为（x,y）那么执行Scale=-1后的点(X,Y)有：(Y-y0)=-1×(y-y0)即：Y=(2y0-y)。即每个像素的y值乘上-1

对于基于webkit核心的浏览器，如Chrome以及Safari，实现元素的垂直翻转或是水平翻转也可以使用如下样式：

/*水平翻转*/.flipx {transform: rotateY(180deg); }/*垂直翻转*/.flipy {transform: rotateX(180deg); }

需要注意

水平翻转或垂直翻转不同于旋转180度。前者以轴为镜像，后者以点为镜像。如果是对称元素，旋转180度和翻转的显示效果基本上就是一致的，但是，非对称元素就会看到明显差异。对于后面提到的目前仅webkit核心浏览器支持的rotateY(180deg)，这里有个大写的Y。我们都知道Y表示纵轴，所以我们可能会误以为这里实现的是垂直翻转，其实非也，这里的Y表示元素以纵轴为镜像翻转，也就是水平翻转了。

▲这里的小三角幸好是左右对称的，如果是长得类似◢的小三角，就只有望洋兴叹的份了。所以，为了更广泛地适应各类翻转情况，不要去使用180度的旋转了，直接使用翻转。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">/*垂直翻转*/.flipy{-moz-transform:scaleY(-1);-webkit-transform:scaleY(-1);-o-transform:scaleY(-1);transform:scaleY(-1);/*IE*/filter:FlipV;}.cor{display:inline-block;width:0;height:0;margin-bottom:-2px;border-width:4px;border-style:solid dashed dashed;overflow:hidden;}.corg6{border-color:#666 transparent transparent;}.menu{display:inline-block;padding:2px 8px;border:1px solid #fff;color:#333;text-decoration:none;}.menu:hover{background-color:#f5f5f5;border:1px solid #ccc;text-decoration:none;}.menu:hover .cor{margin-bottom:auto;vertical-align:2px;}</style></head><body><a href="javascript:" class="menu">我的淘宝<i id="flipCor" class="cor corg6"></i></a></body><script type="text/javascript"src="/jquery/2.0.3/jquery.min.js"></script><script type="text/javascript">$(".menu").bind("mouseover", function() {$("#flipCor").addClass("flipy");}).bind("mouseout", function() {$("#flipCor").removeClass("flipy");});</script></html>

效果如下：

鼠标移上时

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。