transform-origin 的定位

transform-origin接受两个参数,它们可以是百分比,em,px等具体的值,也可以是left,center,right,或者 top,center,bottom等描述性参数,第一个参数表示X方向,第二个参数表示Y方向,但是,当用 left,right,center 来表示的时候,是不区分先后的!也就是说 left center 和 center left 是一回事。具体见下表:

- top left | left top 等价于 0 0;

- top | top center | center top 等价于 50% 0

- right top | top right 等价于 100% 0

- left | left center | center left 等价于 0 50%

- center | center center 等价于 50% 50%(默认值)

- right | right center | center right 等价于 100% 50%

- bottom left | left bottom 等价于 0 100%

- bottom | bottom center | center bottom 等价于 50% 100%

- bottom right | right bottom 等价于 100% 100%

坑啊,今天第一次用CSS3 做3D 立方体,旋转的时候总是出错,后来看到了codepen 上的一个例子,研究了一下,总是不明白 transform-origin 这一点,后来仔细研究了下才发现不用考虑顺序……“左上角”也可以说“上左角”,“东南角”也可以说“南东角”。听着别扭,但意思一样。

codepen 的链接在这里:http://codepen.io/mirceageorgescu/pen/roblc

这个例子里还有一点让人困惑,就是 X Y Z 坐标系。之前一直以为坐标系是想三维建模软件里的世界坐标系一样不随着物体改变而改变,折腾了一整天立方体还是转不对。后来仔细研究下,发现坐标系是相对于元素自身的,也就是随着元素的旋转而旋转。X 指向右方,Y 指向下方,Z 指向前方。

第三点让人困惑的地方在于transform ,transform 中的属性是有先后顺序的。比如:transform: rotateY(180deg) translateZ(100px),表示,先沿Y轴旋转180度,然后向前(即元素的正面)移动100px;这一句和下面这句是相同效果:transform: translateZ(-100px) rotateY(180deg) ,这个表示,先向后面(元素的背面)移动100px,然后旋转180度。这两句的效果是相同的,但顺序不同让它们的值也不同。

时间: 2024-10-12 01:56:23

transform-origin 的定位的相关文章

transform对定位元素的影响

1.基本概念 absolute:生成绝对定位的元素,相对于除position:static 定位以外的第一个有定位属性的父元素进行定位,若父元素没有定位属性则相对于浏览器窗口的左上角定位,定位的元素不再占据文档的空间. relative:生成相对定位的元素,相对于其正常位置进行定位,定位的元素仍然占据文档的空间. 2.transform对子元素定位的影响 父元素添加transform属性后,子元素定位参照变成父元素,包括定位left,top,和width.并且父元素任然占据位置,后面的兄弟元素不

css3 transform

<!DOCTYPE html> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> div{ margin: 30px 0px 80px; wid

好好说一说室内定位技术

室内定位技术进过了几十年的发展,从未像今天这样引起大家的关注,这无疑得益于VR技术在这几年的蓬勃发展,52VR的编辑们今天就梳理下已有的定位技术和手段,有哪些点值得我们参考和注意呢? 那么传统的室内定位技术有哪些呢? 室内无线定位技术可以这样分成三类: 近邻法 三边(角)测量法 模式匹配法. 近邻法: 最简单的方式,直接选定那个信号强度最大的AP的位置.纠正一个很容易被误导的地方,目前大多数手机中的定位方式为(GPS/AGPS.基站定 位.WiFi定位),这里的WiFi定位并不是位置指纹法,而是

无线定位技术

实现室内地图定位导航,需要解决哪些技术难题? 2015-06-18 15:00:00 来源: 知乎每日精选 跟贴 0 条 手机看新闻 Wi-Fi指纹定位是什么原理? 室内定位中的位置指纹法,简单来说,就是事先把各个位置上的信号特征(各Wi-Fi的信号强度)测量一遍,存入指纹数据库.定位的时候,将当前的信号特征与指纹库中的进行匹配,从而确定位置.下图是我本科毕设时画的示意图(AP就是WiFi,RP是离线采集选取的参考点): 离线阶段:记录下每个RP处测到的信号强度,每组数据(指纹)包含4个信号强度

GSM蜂窝基站定位基本原理浅析

http://mol365.net/post/GSMe89c82e7aa9de59fbae7ab99e5ae9ae4bd8de59fbae69cace58e9fe79086e6b585e69e90.aspx 位置服务已经成为越来越热的一门技术,也将成为以后所有移动设备(智能手机.掌上电脑等)的标配.随着人们对BLS(Based Location Serices,基于位置的服务)需求的飞速增长,无线定位技术也越来越得到重视.GSM蜂窝基站定位,以其定位速度快.成本低(不需要移动终端上添加额外的硬件

CSS3中的transform

CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. transform 在2D里主要是4个方法.除了rotate 其他都是接受x y值 translate skew rotate scale Translate:元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标)  transform: translate(100px, 50px); Skew:x,y有分别的方法. x 变化就是左右的倾斜 x 变化是 上下的倾斜 skewX(10deg) skewY(80

jquery.transform

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery.transform</title> <link rel="stylesheet" href="style.css"> </head> <body> <div cl

移动web开发

流式布局 其实  流式布局  就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. 这样的布局方式  就是移动web开发使用的常用布局方式 Viewport 我们猜想下pc页面在移动设备上显示情况. 放不下,缩放? 我们测试下pc页面在移动设备上显示. 默认的缩放的显示的 认识viewport 在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可是设置高度宽度,可是按比例放大缩小,而且能设置是否允许用户自行

通过JS将BSAE64生成图片并下载

HTML:<div style="display:block;margin:0 auto;width:638px;height:795px;"><div id="render" >        CONTENT</div></div> <div id="template" style="margin:10px 0 0 385px;"> <input type=&

Slient SMS 精确基站定位系统笔记

https://cn0xroot.com/tag/osmocombb/ OsmocomBB – 雪碧 0xroot 通信?? 硬件??的|GNURadio |SDR |... http://www.freebuf.com/news/topnews/87353.html 永不消逝的电波(四):从无线电角度揭秘定位劫持 http://www.freebuf.com/vuls/103676.html 如何黑掉 Telegram 以及 WhatsApp? 其实,Silent SMS在各国执法部门都大量使