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 ...
随机推荐
- 一台机器上搭建多个redis实例的配置文件修改部分
1.单个redis服务搭建请参考:redis服务搭建 2.一台Redis服务器,分成多个节点,每个节点分配一个端口(6380,6381…),默认端口是6379. 每个节点对应一个Redis配置文件,如 ...
- maven私服 nexus 的安装与使用
简介 私服不是Maven的核心概念,它仅仅是一种衍生出来的特殊的Maven仓库.通过建立自己的私服,就可以降低中央仓库负荷.节省外网带宽.加速Maven构建.自己部署构建等,从而高效地使用Maven. ...
- grep、正则表达式
1.grep :文本搜索工具 -i:忽略大小写--color:匹配到的内容高亮显示-v:显示没有被模式匹配到的行-o:只显示被模式匹配到的字符串-n:显示匹配到行的行号-E:使用扩展正则表达式-A:后 ...
- Windows下IIS搭建Ftp服务器
第一步:启用Windows IIS Web服务器 1.1 控制面板中找到"程序"并打开 1.2 程序界面找到"启用或关闭Windows功能"并打开 1.3 上面 ...
- C#使用GUID作为随机数种子
使用C#默认的Random无参构造的next生成的随机数,在快速生成随机数的时候,会出现大批量的重复.使用guid作为随机数种子,效果会好很多 Guid temp = Guid.NewGuid(); ...
- mac下安装rabbitmq
使用homebrew安装rabbitmq,命令如下: brew install rabbitmq 安装的位置如下/usr/local/Cellar/rabbitmq/3.7.18 进入到sbin目录下 ...
- JavaEE——JSP开发模式（model1）
model1开发模式 工作流程: ①浏览器请求,JSP页面接收 ②JSP根据请求和JavaBean进行交互 ③JavaBean进行业务处理,JDBC操纵数据库 ④JSP将请求结果返回浏览器页面 利用m ...
- 第一次 在Java课上的编程
第一次在java课上的编程(使用参数输入求和): 代码: public class He { public static void main(String[] args) { ...
- Android OkHttp + Retrofit 下载文件与进度监听
本文链接 下载文件是一个比较常见的需求.给定一个url,我们可以使用URLConnection下载文件. 使用OkHttp也可以通过流来下载文件. 给OkHttp中添加拦截器,即可实现下载进度的监听功 ...
- postman常用断言
1.Code is 200 断言状态码是200 2.contains string 断言respoonse body中包含string 3.json value check (检查JSON值)