一、transform-origin的作用

transform-origin改变元素基点

(transform-origin是变形原点,原点就是元素绕着旋转或变形的点)

注意:该属性只有在设置了transform属性的时候才起作用;

如果在不设置的情况下,元素的基点默认的是其中心位置。

在没有使用  transform-origin 属性的情况下 transformrotate , 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属性的更多相关文章

  1. css transform旋转属性

    将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  2. 关于transform的属性

    transfrom的出现让许多静态的东西动了起来,让网页更加具有生命力. 在transform属性中,transform-origin属性仅是其中之一,要彻底理解transform属性,这是不够的,必 ...

  3. 封装transform函数(设置和获取transform的属性和属性值)

    (function (w) { /** * 设置或者获取元素的transform属性值 * @param node 要设置的元素 * @param param 变换属性: translate\scal ...

  4. css3 transform 变形属性详解

    本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...

  5. transform,transtion属性

    transform:变化类型,transtion变化方式

  6. background-clip,origin属性

    background-clip是新增属性之一,其作用是确定背景的裁剪区域. background-clip语法: background-clip:margin-box | padding-box | ...

  7. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  8. 【转】IOS屏幕旋转与View的transform属性之间的关系,比较底层

    iTouch,iPhone,iPad设置都是支持旋转的,如果我们的程序能够根据不同的方向做出不同的布局,体验会更好. 如何设置程序支持旋转呢,通常我们会在程序的info.plist中进行设置Suppo ...

  9. CSS3学习之 transform 属性

    CSS3 transform是什么? transform的含义是:改变,使…变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...

  10. CSS3中transform几个属性值的注意点

    transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...

随机推荐

  1. MySQL5.6版本之后设置DATETIME类型自动更新

    在使用MySQL中datetime格式自动更新特性时,我们应该明确一点,datetime格式设置默认值为当前时间和自动更新时间是从MySQL5.6版本之后开始支持的.此前我们都是使用timestamp ...

  2. NFS服务和DHCP服务讲解

    1.NFS服务端概述 NFS,是Network File System的简写,即网络文件系统.网络文件系统是FreeBSD支持的文件系统中的一种,也被称为NFS: NFS允许一个系统在网络上与他人共享 ...

  3. $destroy——angular

    参考资料:[http://odetocode.com/blogs/scott/archive/2013/07/16/angularjs-listening-for-destroy.aspx]

  4. 嵌套的frame

    自动化的测试中,iframe的嵌套也是很常见的,对于嵌套的iframe,我们处理的方式是先进入到iframe的父节点, 再进入到子节点,然后可以对子节点里面的对象进行处理和操作.如下的html代码效果 ...

  5. 【MM系列】SAP MM模块-打开前面物料账期的方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]在SAP里查看数据的方法   前言部 ...

  6. seanborn使用函数regplot回归分析绘图

    可以用regplot(x, y, data)绘制回归图.data参数是DataFram类型,x是其中某一列列名,是即将绘制的图的x坐标,y是其中某一列,是图的y坐标 下面代码是对seaborn内置数据 ...

  7. python每日一练:0014题

    第 0014 题: 纯文本文件 student.txt为学生信息, 里面的内容(包括花括号)如下所示: { "1":["张三",150,120,100], &q ...

  8. java正则匹配正则表达式

    1.简单匹配小案例 public static void main( String[] args ){ // 按指定模式在字符串查找 String line = "This order wa ...

  9. django中的一对一的关系

    在django中一对一的关系其实就是在后面加上了unique=True 唯一的操作 源码就是这样的 其余的操作跟多对一的操作一样

  10. 解读Nodejs多核处理模块cluste

    http://blog.fens.me/nodejs-core-cluster/ Node.js开发框架Express4.x   http://blog.fens.me/nodejs-express4 ...