transform变形原点

前端之家收集整理的这篇文章主要介绍了transform变形原点前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
                                            <table class="text"&gt;<tbody><tr class="li1"&gt;

<td class="ln"><pre class="de1">1
2
3
4
5
6
@H_301_1@</td>
<td class="de1"><pre class="de1">默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处。
我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。
如果我们把元素变换原点(transform-origin)设置0(x) 0(y),这个时候元素的变换原点转换到元素的左顶角处。
改变transform-origin属性的X轴和Y轴的值就可以重置元素变形原点位置,其基本语法如下所示:
transform-origin:[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | left | center | right] | [[<percentage> | <length> | left | center | right] &amp;&amp; [<percentage> | <length> | top | center | bottom]] <length> ?
transform-origin属性值可以是百分比、em、px等具体的值,也可以是top、right、bottom、left和center这样的关键词。@H_301_1@</td>
</tr></table>

猜你在找的程序笔记相关文章