CSS：巧用scale实现元素转向
<style>.test { margin: 10px auto; width: 100px; height: 100px; text-align: center; font: normal 30px / 100px sans-serif; border: 1px solid; }
</style>
<p>transform: scale(1,1): </p>
<div class="test" style="transform: scale(1,1)">花潮</div>
<p>transform: scale(-1,1): </p>
<div class="test" style="transform: scale(-1,1)">花潮</div>
<p>transform: scale(1,-1): </p>
<div class="test" style="transform: scale(1,-1)">花潮</div>
<p>transform: scale(-1,-1): </p>
<div class="test" style="transform: scale(-1,-1)">花潮</div> 看范例演示的效果，貌似(-1,1)是Y轴转了180度，让文字反向了；(1,-1)好像转的是X轴，是的文字头朝下了。
而都是负值的时候就是两个轴都转了吧。 scale()函数记得只是放大和缩小用的，还能这样用啊。非常出乎意料。 旋转应该是rotate的事吧。那这个scale就不能理解是转动，只能理解为缩放的特例，缩放出天际线了{:4_173:} 红影 发表于 2022-7-15 10:48
旋转应该是rotate的事吧。那这个scale就不能理解是转动，只能理解为缩放的特例，缩放出天际线了
rotate是地道的角度转动，操作图片时，很多情况下达不到要求，这是就用scale方法。scale原本是缩放的，scale（1）表示不缩放，-1时则达成转换角度的需要，结合xy坐标缩放时有妙用 红影 发表于 2022-7-15 10:42
看范例演示的效果，貌似(-1,1)是Y轴转了180度，让文字反向了；(1,-1)好像转的是X轴，是的文字头朝下了。
...
这个转法对图片的处理特别有用，试试就知道。也建议比较一下rotate和上述变化的区别。 红影 发表于 2022-7-15 10:47
scale()函数记得只是放大和缩小用的，还能这样用啊。非常出乎意料。
之前就曾用到过这个方案，你还问过。 本帖最后由 马黑黑 于 2022-7-15 12:18 编辑 <br /><br /><style>
.sImg { margin: 10px; }
</style>
<p>待旋转图片:</p>
<img class="sImg" src="/static/image/smiley/hcbiaoqing2/117.gif" alt="">
<p>1 transform: ratate(90deg)</p>
<img class="sImg" src="/static/image/smiley/hcbiaoqing2/117.gif" alt="" style="transform: rotate(90deg)">
<p>2 transform: ratate(180deg)</p>
<img class="sImg" src="/static/image/smiley/hcbiaoqing2/117.gif" alt="" style="transform: rotate(180deg)">
<p>3 transform: ratate(270deg)</p>
<img class="sImg" src="/static/image/smiley/hcbiaoqing2/117.gif" alt="" style="transform: rotate(270deg)">
<p>4 transform: ratate(-90deg)</p>
<img class="sImg" src="/static/image/smiley/hcbiaoqing2/117.gif" alt="" style="transform: rotate(-90deg)">
<p>5 transform: ratate(-180deg)</p>
<img class="sImg" src="/static/image/smiley/hcbiaoqing2/117.gif" alt="" style="transform: rotate(-180deg)">
<p>6 transform: ratate(-270deg)</p>
<img class="sImg" src="/static/image/smiley/hcbiaoqing2/117.gif" alt="" style="transform: rotate(-270deg)">
<hr>
<p>7 transform: scale(-1,1)</p>
<img class="sImg" src="/static/image/smiley/hcbiaoqing2/117.gif" alt="" style="transform:scale(-1,1)">
<p>8 transform: scale(1,-1)</p>
<img class="sImg" src="/static/image/smiley/hcbiaoqing2/117.gif" alt="" style="transform:scale(1,-1)">
<p>9 transform: scale(-1,-1)</p>
<img class="sImg" src="/static/image/smiley/hcbiaoqing2/117.gif" alt="" style="transform:scale(-1,-1)"> 如果是上下左右四个方向的变换，用scale更容易控制 这些图片转换真厉害。 加林森 发表于 2022-7-15 12:51
这些图片转换真厉害。
方向的变化 加林森 发表于 2022-7-15 12:51
这些图片转换真厉害。
你的鹰可以参照这些变化中某个你认为可以方便控制的，根据飞行方向去调整朝向。 马黑黑 发表于 2022-7-15 12:52
方向的变化
嗯嗯。学习了。 马黑黑 发表于 2022-7-15 12:53
你的鹰可以参照这些变化中某个你认为可以方便控制的，根据飞行方向去调整朝向。
好的。记住了。{:4_190:} 加林森 发表于 2022-7-15 12:59
好的。记住了。
等下我示范一下 马黑黑 发表于 2022-7-15 13:12
等下我示范一下
好的。 加林森 发表于 2022-7-15 13:18
好的。
弄好了 马黑黑 发表于 2022-7-15 13:22
弄好了
我又学习了一招。真开心！{:4_191:} 加林森 发表于 2022-7-15 13:37
我又学习了一招。真开心！
{:5_108:} 马黑黑 发表于 2022-7-15 13:41
{:4_190:}