transform-origin盒子旋转位置
transform-Origin属性允许您更改转换元素的位置。
2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
为了更好地理解Transform-Origin属性，请查看这个演示.
| x-axis |
定义视图被置于 X 轴的何处。可能的值：
|
| y-axis |
定义视图被置于 Y 轴的何处。可能的值：
|
| z-axis |
定义视图被置于 Z 轴的何处。可能的值：
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .a1{
position: relatve;
height: 200px;
width: 80px;
background: springgreen;
border:1px solid black;
margin:100px 200px;
color: white;
font-size: 30px;
}
#b2{
position: absolute;
background: rgba(0,0,225,0.5);
height: 200px;
width: 80px;
color: white;
transform:rotate(70deg)
} </style>
</head>
<body>
1
<div class="a1">
<div id="b2" style="transform-origin: left top;">左上</div>
</div>
2
<div class="a1">
<div id="b2" style="transform-origin: right top;">右上</div>
</div>
3
<div class="a1">
<div id="b2" style="transform-origin: center top;">中上</div>
</div>
4
<div class="a1">
<div id="b2" style="transform-origin: left bottom;">左下</div>
</div>
5
<div class="a1">
<div id="b2" style="transform-origin: left center;">左中</div>
</div>
6
<div class="a1">
<div id="b2" style="transform-origin: right top;">右上</div>
</div>
7
<div class="a1">
<div id="b2" style="transform-origin: right bottom;">右下</div>
</div>
8
<div class="a1">
<div id="b2" style="transform-origin: bottom center;">下中</div>
</div>
9
<div class="a1">
<div id="b2" style="transform-origin:center center;">中中</div>
</div>
</body>
</html>
transform-origin盒子旋转位置的更多相关文章
- iOS transform解决连续多次旋转缩放，实现图片旋转缩放效果
一.需求 实现imageView的缩放旋转效果,一般有两种方式: 1.底层加scrollview,利用scrollview的属性实现.(推荐这种,这是我比较后发现的,手势做缩放旋转会有点弊端) 2.利 ...
- CSS3 transform rotate（旋转）锯齿的解决办法
-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...
- css3动画属性系列之transform细讲旋转rotate
1.语法: transform: none | <transform-function> [<transform-function>]* 2.取值: none ...
- 【转】Unity3D Transform中有关旋转的属性和方法测试
Transform有关旋转个属性和方法测试 一,属性 1,var eulerAngles : Vector3 public float yRotation = 5.0F; void Update() ...
- javascrip总结42:属性操作案例: 点击盒子,改变盒子的位置和背景颜色
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- CSS3 transform rotate（旋转）锯齿/元素抖动模糊的解决办法
使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...
- 【转】IOS屏幕旋转与View的transform属性之间的关系，比较底层
iTouch,iPhone,iPad设置都是支持旋转的,如果我们的程序能够根据不同的方向做出不同的布局,体验会更好. 如何设置程序支持旋转呢,通常我们会在程序的info.plist中进行设置Suppo ...
- JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置
---恢复内容开始--- 圆角矩形 border-radius:50% 40% 30% 33px: 像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 ...
- transform旋转，平移，缩放，扭曲 斜切
transform 改变rotate 旋转translate 位移scale 缩放 skew 斜切变形 记得兼容性:-webkit- -moz- -ms- -o- transf ...
随机推荐
- 【Dgango】模版
继承 ① extends用法:只继承一个模版 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- cmd控制台 wrapper | OpenSCManager failed - 拒绝访问。 (0x5)解决
在windows上安装mycat执行命令时, D:\develop\Mycat\bin>mycat.bat install 返回wrapper | OpenSCManager failed - ...
- idea 自动生成并跳转单元测试
在要测试的类上按快捷键ctrl + shift + t,选择Create New Test,在出现的对话框的下面member内勾选要测试的方法,点击ok 或者点击菜单栏Navigate–>tes ...
- 跟文档学习next.js
前言:Next.js 是一个轻量级的 React 服务端渲染应用框架. Next.js中文点击这里 Next.js中文站Github点击这里 新建文件夹安装它: npm install --save ...
- java基础之和String相关的一些转换
String虽然不是java的基本数据类型,但使用的频率却非常之高,可以说是很常见了. 列举几个常见的关于String的转换,写的有点过于简洁,欢迎纠错和补充 1.Object和String的 ...
- Chrome浏览器启动报错：应用程序无法启动，因为应用程序的并行配置不正确。
因为国庆节了,难得关一次机(可能搞IT的习惯吧),结果给祖国庆祝完70寿辰之后归来,启动电脑,就打不开Chrome浏览器了,报错如下: 应用程序无法启动,因为应用程序的并行配置不正确.有关详细信息,请 ...
- Angular2+之使用FormGroup、FormBuilder和Validators对象控制表单（取值、赋值、校验和是否可编辑等）
1.要使用Angular自带的表单控制需要先引入相关模块(.ts文件): import { FormGroup, //表单对象类 FormBuilder, //表单生成工具类 Validators} ...
- CyclicBarrier 是如何做到等待多线程到达一起执行的？
我们有些场景,是需要使用 多线各一起执行某些操作的,比如进行并发测试,比如进行多线程数据汇总. 自然,我们可以使用 CountDownLatch, CyclicBarrier, 以及多个 Thread ...
- 【NOIP2003】传染病控制
Description 问题背景: 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府 决定不惜一切代价控制传染病的蔓延.不幸的是,由于人们尚未完全认识这种 ...
- 【NOIP模拟赛】小奇挖矿 2
[题目背景] 小奇飞船的钻头开启了无限耐久+精准采集模式!这次它要将原矿运到泛光之源的矿石交易市场,以便为飞船升级无限非概率引擎. [问题描述] 现在有m+1个星球,从左到右标号为0到m,小奇最初在0 ...