变形--原点 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;
}
演示结果:
变形--原点 transform-origin的更多相关文章
- transform(变形)和transform-origin(变形原点)
转载请说明出处,原文地址http://blog.sina.com.cn/s/blog_780a942701014xl8.html transform(变形)和transform-origin(变形原点 ...
- CSS transform(变形)和transform-origin(变形原点)
transform(变形)和transform-origin(变形原点)的说明: 目前这两个属性得到了除去ie以外各个主流浏览器webkit,firefox,opera的支持,属性名分别为 -webk ...
- CSS3中的变形处理(transform)属性
在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...
- 【20190328】CSS-transform-origin(变形原点)解析
因为搜遍网上也没有一篇文章把transform-origin讲得很清楚的,所以自己总结了一下 transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了tran ...
- css之变形(transform)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [转] css3变形属性transform
w3c上的例子是这样子写的:· div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform: ...
- css3中的变形(transform)、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- 变形属性 transform
transform功能可以实现文字或图像的旋转.绽放.倾斜.与移动: 注意点:1.其移动.旋转.倾斜.与绽放这4种效果的使用先后顺序不同,页面会显示不同的结果: 2.属性值有一个参数与有多个参数的别: ...
- css3 2D变形(transform)移动、缩放、旋转、倾斜
一. translate(x,y) 或者translateX(x)或者translateY(y) 注意点:translateX(x)和translateY(y)大写X和Y:只写一个值,默认y=0. & ...
随机推荐
- QT中的SOCKET编程(QT-2.3.2)
转自:http://mylovejsj.blog.163.com/blog/static/38673975200892010842865/ QT中的SOCKET编程 2008-10-07 23:13 ...
- 关于android获得设备宽高
传统的办法: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(d ...
- Spring中Quartz的最精简的配置
<bean id="parserJob4Pos" class="org.springframework.scheduling.quartz.JobDetailBea ...
- ArcSDE for SQL Server安装及在ArcMap中创建ArcSDE连接
原文:ArcSDE for SQL Server安装及在ArcMap中创建ArcSDE连接 安装ArcSDE for SQL Server,最后一步成功后的界面如下: 在ArcMap中创建ArcSDE ...
- asp.net中控件的Attributes用法
在点击保存时通常会验证输入框是否为空,一般我们会在按钮控件中添加OnClientClick=“return Check();”事件,并通过javascript来处理. 下面是另一种方法,在后台.cs代 ...
- JavaScript:画廊案例
经常会在网上看到这样的操作:有几个按钮.可以控制器图片的上一张.下一张.那么现在就使用按钮的click单击事件来切换img的图片. 此时由于只是简单的演示,将所有的图片保存在images目录中.所有的 ...
- 什么是webshell?
webshell是web入侵的脚本攻击工具. 简单的说来,webshell就是一个asp或php木马后门,黑客在入侵了一个网站后,常常在将这些 asp或php木马后门文件放置在网站服务器的web目录中 ...
- java获取当前时间戳的方法
获取当前时间戳 //方法 一 System.currentTimeMillis(); //方法 二 Calendar.getInstance().getTimeInMillis(); //方法 三 n ...
- Android Service Intent must be explicit的解决方法
今天在学习Android的Service组件的时候,在AndroidMainfest.xml中定义了 <service android:name=".BindService" ...
- onRetainNonConfigurationInstance和getLastNonConfigurationInstance
很多网友可能知道Android横竖屏切换时会触发onSaveInstanceState,而还原时会产生 onRestoreInstanceState,但是Android的Activity类还有一个方法 ...