transform-origin属性
一、transform-origin的作用
transform-origin改变元素基点
(transform-origin是变形原点,原点就是元素绕着旋转或变形的点)
注意:该属性只有在设置了transform属性的时候才起作用;
如果在不设置的情况下,元素的基点默认的是其中心位置。
在没有使用 transform-origin 属性的情况下 transform 的 rotate , translate , scale , skew , matrix 这些操作都是以自身在中心位置为原点的。
二、transform-origin的用法
语法:
-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ]
transform-origin
属性值可以是百分比、em、px等具体的值,也可以是top、right、bottom、left和center这样的关键词。
2D的变形 中的 transform-origin
属性可以是一个参数值,也可以是两个参数值。如果是两个参数值时,第一值设置水平方向X轴的位置,第二个值是用来设置垂直方向Y轴的位置。
3D的变形 中的 transform-origin
属性还包括了Z轴的第三个值。其各个值的取值简单说明如下:
- top = top center = center top 等价于 50% 0
- right = right center = center right 等价于 100%或(100% 50%)
- bottom = bottom center = center bottom 等价于 50% 100%
- left = left center = center left 等价于 0或(0 50%)
- center = center center 等价于 50%或(50% 50%)
- top left = left top 等价于 0 0
- right top = top right 等价于 100% 0
- bottom right = right bottom 等价于 100% 100%
- bottom left = left bottom 等价于 0 100%
left,center right 是水平方向取值,对应的百分值为left=0%;center=50%;right=100%
top center bottom 是垂直方向的取值,其中top=0%;center=50%;bottom=100%;
演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中心原点</title>
<style>
.box{
width:100px;height: 160px;
border:2px solid #faa;
margin: 50px 150px;
/*padding:30px;*/
box-shadow: 5px 5px 5px #ddd;
}
.bo{
width:100px;height:160px;
background-color:rgba(0,22,255,0.3);
border:2px solid red;
margin:auto;
transform:rotate(45deg);
}
.box12{
/*transform-origin:0 0;*/
transform-origin:top left;
}
.box22{
transform-origin:50% 0;
/*transform-origin:top;*/
}
.box32{
transform-origin:0 50% ;
/*transform-origin:left;*/
}
.box42{
transform-origin:100% 50% ;
/*transform-origin:right;*/
}
.box52{
transform-origin:50% 100%;
/*transform-origin:bottom;*/
}
.box62{
/*transform-origin:50% 50%;*/
transform-origin:center;
}
.box72{
transform-origin:100% 0;
/*transform-origin:top right;*/
}
.box82{
transform-origin:0 100% ;
/*transform-origin:bottom left;*/
}
.box92{
transform-origin:100% 100%;
/*transform-origin:bottom right;*/
}
</style>
</head>
<body>
1
<div class="box">
<div class="box12 bo">测试目标1(左上角顶点)</div>
</div>
2
<div class="box">
<div class="box22 bo">测试目标2(顶边中点)</div>
</div>
3
<div class="box">
<div class="box32 bo">测试目标3(左边中点)</div>
</div>
4
<div class="box">
<div class="box42 bo">测试目标4(右边中点)</div>
</div>
5
<div class="box">
<div class="box52 bo">测试目标5(底边中点)</div>
</div>
6
<div class="box">
<div class="box62 bo">测试目标6(中心点)</div>
</div>
7
<div class="box">
<div class="box72 bo">测试目标7(右上角顶点)</div>
</div>
8
<div class="box">
<div class="box92 bo">测试目标9(右下角顶点)</div>
</div>
9
<div class="box">
<div class="box82 bo">测试目标8(左下角顶点)</div>
</div>
</body>
</html>
实现效果:
transform-origin属性的更多相关文章
- css transform旋转属性
将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 关于transform的属性
transfrom的出现让许多静态的东西动了起来,让网页更加具有生命力. 在transform属性中,transform-origin属性仅是其中之一,要彻底理解transform属性,这是不够的,必 ...
- 封装transform函数(设置和获取transform的属性和属性值)
(function (w) { /** * 设置或者获取元素的transform属性值 * @param node 要设置的元素 * @param param 变换属性: translate\scal ...
- css3 transform 变形属性详解
本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...
- transform,transtion属性
transform:变化类型,transtion变化方式
- background-clip,origin属性
background-clip是新增属性之一,其作用是确定背景的裁剪区域. background-clip语法: background-clip:margin-box | padding-box | ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- 【转】IOS屏幕旋转与View的transform属性之间的关系,比较底层
iTouch,iPhone,iPad设置都是支持旋转的,如果我们的程序能够根据不同的方向做出不同的布局,体验会更好. 如何设置程序支持旋转呢,通常我们会在程序的info.plist中进行设置Suppo ...
- CSS3学习之 transform 属性
CSS3 transform是什么? transform的含义是:改变,使…变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
- CSS3中transform几个属性值的注意点
transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...
随机推荐
- MySQL5.6版本之后设置DATETIME类型自动更新
在使用MySQL中datetime格式自动更新特性时,我们应该明确一点,datetime格式设置默认值为当前时间和自动更新时间是从MySQL5.6版本之后开始支持的.此前我们都是使用timestamp ...
- NFS服务和DHCP服务讲解
1.NFS服务端概述 NFS,是Network File System的简写,即网络文件系统.网络文件系统是FreeBSD支持的文件系统中的一种,也被称为NFS: NFS允许一个系统在网络上与他人共享 ...
- $destroy——angular
参考资料:[http://odetocode.com/blogs/scott/archive/2013/07/16/angularjs-listening-for-destroy.aspx]
- 嵌套的frame
自动化的测试中,iframe的嵌套也是很常见的,对于嵌套的iframe,我们处理的方式是先进入到iframe的父节点, 再进入到子节点,然后可以对子节点里面的对象进行处理和操作.如下的html代码效果 ...
- 【MM系列】SAP MM模块-打开前面物料账期的方法
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]在SAP里查看数据的方法 前言部 ...
- seanborn使用函数regplot回归分析绘图
可以用regplot(x, y, data)绘制回归图.data参数是DataFram类型,x是其中某一列列名,是即将绘制的图的x坐标,y是其中某一列,是图的y坐标 下面代码是对seaborn内置数据 ...
- python每日一练:0014题
第 0014 题: 纯文本文件 student.txt为学生信息, 里面的内容(包括花括号)如下所示: { "1":["张三",150,120,100], &q ...
- java正则匹配正则表达式
1.简单匹配小案例 public static void main( String[] args ){ // 按指定模式在字符串查找 String line = "This order wa ...
- django中的一对一的关系
在django中一对一的关系其实就是在后面加上了unique=True 唯一的操作 源码就是这样的 其余的操作跟多对一的操作一样
- 解读Nodejs多核处理模块cluste
http://blog.fens.me/nodejs-core-cluster/ Node.js开发框架Express4.x http://blog.fens.me/nodejs-express4 ...