任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素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;
}

演示结果:

变形--原点 transform-origin的更多相关文章

  1. transform(变形)和transform-origin(变形原点)

    转载请说明出处,原文地址http://blog.sina.com.cn/s/blog_780a942701014xl8.html transform(变形)和transform-origin(变形原点 ...

  2. CSS transform(变形)和transform-origin(变形原点)

    transform(变形)和transform-origin(变形原点)的说明: 目前这两个属性得到了除去ie以外各个主流浏览器webkit,firefox,opera的支持,属性名分别为 -webk ...

  3. CSS3中的变形处理(transform)属性

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...

  4. 【20190328】CSS-transform-origin(变形原点)解析

    因为搜遍网上也没有一篇文章把transform-origin讲得很清楚的,所以自己总结了一下 transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了tran ...

  5. css之变形(transform)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. [转] css3变形属性transform

    w3c上的例子是这样子写的:· div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform: ...

  7. css3中的变形(transform)、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  8. 变形属性 transform

    transform功能可以实现文字或图像的旋转.绽放.倾斜.与移动: 注意点:1.其移动.旋转.倾斜.与绽放这4种效果的使用先后顺序不同,页面会显示不同的结果: 2.属性值有一个参数与有多个参数的别: ...

  9. css3 2D变形(transform)移动、缩放、旋转、倾斜

    一. translate(x,y) 或者translateX(x)或者translateY(y) 注意点:translateX(x)和translateY(y)大写X和Y:只写一个值,默认y=0. & ...

随机推荐

  1. QT中的SOCKET编程(QT-2.3.2)

    转自:http://mylovejsj.blog.163.com/blog/static/38673975200892010842865/ QT中的SOCKET编程 2008-10-07 23:13 ...

  2. 关于android获得设备宽高

    传统的办法: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(d ...

  3. Spring中Quartz的最精简的配置

    <bean id="parserJob4Pos" class="org.springframework.scheduling.quartz.JobDetailBea ...

  4. ArcSDE for SQL Server安装及在ArcMap中创建ArcSDE连接

    原文:ArcSDE for SQL Server安装及在ArcMap中创建ArcSDE连接 安装ArcSDE for SQL Server,最后一步成功后的界面如下: 在ArcMap中创建ArcSDE ...

  5. asp.net中控件的Attributes用法

    在点击保存时通常会验证输入框是否为空,一般我们会在按钮控件中添加OnClientClick=“return Check();”事件,并通过javascript来处理. 下面是另一种方法,在后台.cs代 ...

  6. JavaScript:画廊案例

    经常会在网上看到这样的操作:有几个按钮.可以控制器图片的上一张.下一张.那么现在就使用按钮的click单击事件来切换img的图片. 此时由于只是简单的演示,将所有的图片保存在images目录中.所有的 ...

  7. 什么是webshell?

    webshell是web入侵的脚本攻击工具. 简单的说来,webshell就是一个asp或php木马后门,黑客在入侵了一个网站后,常常在将这些 asp或php木马后门文件放置在网站服务器的web目录中 ...

  8. java获取当前时间戳的方法

    获取当前时间戳 //方法 一 System.currentTimeMillis(); //方法 二 Calendar.getInstance().getTimeInMillis(); //方法 三 n ...

  9. Android Service Intent must be explicit的解决方法

    今天在学习Android的Service组件的时候,在AndroidMainfest.xml中定义了 <service android:name=".BindService" ...

  10. onRetainNonConfigurationInstance和getLastNonConfigurationInstance

    很多网友可能知道Android横竖屏切换时会触发onSaveInstanceState,而还原时会产生 onRestoreInstanceState,但是Android的Activity类还有一个方法 ...