一、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. 使用 go protoc --go_out 输出的 *.pb.go文件时报 undefined: proto.ProtoPackageIsVersion3

    事情是这样的:我参考go的 grpc 实现 https://grpc.io/docs/quickstart/go/ Download the example The grpc code that wa ...

  2. 关于win10系统如何调用debug查看CPU汇编指令和内存

    下载安装DOSBox.网上提供下载地址:DOSBOX Debug是DOS(Disk Operating System,磁盘操作系统).windows提供的实模式(8086方式)程序的调试工具.使用它, ...

  3. 强化学习之MDP

    前言 最近又入坑RL了,要搞AutoML就要学会RL,真的是心累.. 正文 MDP里面比较重要的就是状态值函数和动作-状态值函数吧,然后再求最优状态值函数和最优动作状态值函数,状态值函数的公式推导一开 ...

  4. 1.parrot os 3.5-----nmap-----katoolin--zenmap

    源:https://www.youtube.com/watch?v=LpM1KooILRc&list=PLBf0hzazHTGOEuhPQSnq-Ej8jRyXxfYvl&index= ...

  5. Win10.Shift+鼠标右键_CMD(管理员)

    1.资料: 1.1.Windows10下设置Shift+右键增加cmd - wyx0712的博客 - CSDN博客.html(https://blog.csdn.net/wyx0712/article ...

  6. 自定义SpringBoot启动控制台图标

    使用过SpringBoot的小伙伴众所周知,在启动的过程中,在控制台会首先打印spring的图标以及版本号(这里以IDEA为例) 如果需要更改这个打印图标的话, 需要以下步骤: 1.打开SpringB ...

  7. P1536村村通

    这是一个并查集的题,被洛谷评为提高—. 拿到这个题便看出了这是一个裸的并查集,于是就写了一个模板,结果发现连输入都输不进去,一看竟然是多组数据,,然后看到N==0结束,于是便加了一层while.之后提 ...

  8. tensorflow学习笔记六----------神经网络

    使用mnist数据集进行神经网络的构建 import numpy as np import tensorflow as tf import matplotlib.pyplot as plt from ...

  9. vscode调试php

    xdebug调试vscode 下载xdebug.dll扩展库 php.ini配置 [XDebug] xdebug.remote_enable = xdebug.remote_autostart = z ...

  10. 2018-8-10-dotnet-core-编程规范

    title author date CreateTime categories dotnet core 编程规范 lindexi 2018-08-10 19:16:52 +0800 2018-05-0 ...