41. CSS3变形之原点 transform-origin
任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素 X 轴和 Y 轴的 50%处。如下图所示:
在没有重置transform-origin
改变元素原点位置的情况下,CSS 变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。但很多时候,我们可以通过transform-origin
来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。
transform-origin
取值和元素设置背景中的background-position
取值类似,如下表所示:
示例展示:
通过transform-origin
改变元素原点到左上角,然后进行顺时旋转 45 度。
HTML 代码:
<div class="wrapper"> <div>原点在默认位置处</div> </div> <div class="wrapper transform-origin"> <div>原点重置到左上角</div> </div>
CSS 代码:
.wrapper { width: 300px; height: 300px; float: left; margin: 100px; border: 2px dotted red; line-height: 300px; text-align: center; } .wrapper div { background: orange; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .transform-origin div { -webkit-transform-origin: left top; transform-origin: left top; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 41. CSS3变形之原点 transform-origin
码云笔记 » 41. CSS3变形之原点 transform-origin