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 ...
随机推荐
- 基于Docker搭建大数据集群（三）Hadoop部署
主要内容 Hadoop安装 前提 zookeeper正常使用 JAVA_HOME环境变量 安装包 微云下载 | tar包目录下 Hadoop 2.7.7 角色划分 角色分配 NN DN SNN clu ...
- 今天第一次解决了程序在未装VS和XP下运行的问题
http://www.cnblogs.com/zero5/p/3162948.html 一位素不相识的朋友做的代码雨屏保程序 - 残雪孤侠 - 博客园 上面是我的BLOG 群共享里,有程序和代码 ...
- centos6.9实时查看tomcat运行日志
1.切换到tomcat的logs目录下 cd /usr/local/apache-tomcat-/logs 2.执行命令,查看日志 tail -f catalina.out 3.退出 Ctrl+c
- 【ADO.NET基础-GridView】GridView的编辑、更新、取消、删除以及相关基础操作代码
代码都是基础操作,后续功能还会更新,如有问题欢迎提出和提问....... 前台代码: <asp:GridView ID=" OnRowDataBound="GridView1 ...
- 利用百度云接口实现车牌识别·python
一个小需求---实现车牌识别. 目前有两个想法 1. 调云在线的接口或者使用SDK做开发(配置环境和变异第三方库麻烦,当然使用python可以避免这些问题) 2. 自己实现车牌识别算法(复杂) 一开始 ...
- LeetCode 题解汇总
前言 现如今,对于技术人员(软开.算法等)求职过程中笔试都是必不可少的(免笔试的除外,大部分人都需要笔试),而笔试一般组成都是选择.填空.简答题.编程题(这部分很重要),所以刷题是必不可少的:对于应届 ...
- Vue：获取当前定位城市名
实现思想:通过定位获取到当前所在城市名: 1.在工程目录index.html中引入: <script type="text/javascript" src="htt ...
- ELK 学习笔记之 Logstash之output配置
Logstash之output配置: 输出到file 配置conf: input{ file{ path => "/usr/local/logstash-5.6.1/bin/spark ...
- day 20
目录 一.继承初体验 二.寻找继承关系 三.继承背景下对象属性查找顺序 四.派生 五.子类派生出新的属性,并重复父类的属性 六.新式类与经典类(了解) 一.继承初体验 父类: class Parent ...
- 像智能手机一样管理云端应用：阿里云联合微软全球首发开放应用模型（OAM）
2019 年 10 月 17 日上午 9 点 15 分,阿里巴巴合伙人.阿里云智能基础产品事业部总经理蒋江伟在 QCon 上海<基于云架构的研发模式演进>主题演讲中,正式宣布: " ...