变形--原点 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. & ...
随机推荐
- (IOS)Swift2.0 Radio 程序分析
本文主要分享下楼主在学习Swift编程过程中,对GitHub上的一个开源项目Swift Radio的研究心得. 项目地址:https://github.com/swiftcodex/Swift-Rad ...
- In App Purchase
参考文章1,参考文章2,参考文章3, 参考文章3 一.Product 分类: Consumables: 应该在应用里被消费掉的.(Coupon, 生命数) Non-Consumab ...
- angularJS平行控制器间共享数据
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Android生命周期详细说明
提供两个关于Activity的生命周期模型图示帮助理解: 图1 图2 从图2所示的Activity生命周期不难看出, ...
- android判断网络连接状态、联网类型、运营商
/** * 获取上网方式 * * @param mContext * @return */ public static String getNetType(Context mContext) { St ...
- JMeter学习-009-JMeter 后置处理器实例之 - 正则表达式提取器(二)多参数获取
前文简述了通过后置处理器 - 正则表达式提取器 获取 HTTP请求 响应结果中的特定数据,未看过的亲,敬请参阅 JMeter学习-008-JMeter 后置处理器实例之 - 正则表达式提取器(一). ...
- sell -- 解码16进制unicode
1. //System.out.println("decodeUnicode:" + decodeUnicode("0049"));//I public sta ...
- 包含Blob字段的表无法Export/Import
最近一直用MySQL-Front的导出导出工具完成数据库的备份,确实比较方便快捷. 后来增加了一张表,其中有blob字段,上传几个文件后,发现导出不好用了,进度条长期处于停滞状态. 想想也是,要把bl ...
- BIND_MISMATCH导致过多VERSION COUNT的问题
并不是用了绑定变量就一定都会游标共享,下面我们介绍的就是一种例子.BIND_MISMATCH导致VERSION COUNT过多的原因解释: This is due to the bind buffer ...
- apt-get -y install中的-y是什么意思?
是同意的意思.没有 -y的命令也可以执行,系统会提示你是否安装,输入y,回车,就会安装了 apt-get -y install这个指令则是跳过系统提示,直接安装.