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 ...
随机推荐
- Python爬虫（三）：BeautifulSoup库
BeautifulSoup 是一个可以从 HTML 或 XML 文件中提取数据的 Python 库,它能够将 HTML 或 XML 转化为可定位的树形结构,并提供了导航.查找.修改功能,它会自动将输入 ...
- 【HIVE】各种时间格式处理
yyyy-MM-dd与yyyyMMdd000000转换的三种方法 方法一:date_format(只支持yyyy-MM-dd -> yyyyMMdd000000) select date_for ...
- Sublime text3 配置c++环境 并设置快捷键
VScode配c++环境太麻烦了 打算用sublime写C++ 记录一下配置过程因为我是有DEV环境的 直接将MINGW64加入环境变量即可 在DEV文件夹下的MinGW64\bin(就是有g++.e ...
- 深入了解opacity和rgba
1. rgba 首先它是一个属性值,语法为rgba(r,g,b,a) - r为红色值, 正整数 | 百分数 - g为绿色值,正整数 | 百分数 - b为蓝色值,正整数 | 百分数 - a为alpha( ...
- STM32之串口DMA接收不定长数据
STM32之串口DMA接收不定长数据 引言 在使用stm32或者其他单片机的时候,会经常使用到串口通讯,那么如何有效地接收数据呢?假如这段数据是不定长的有如何高效接收呢? 同学A:数据来了就会进入串口 ...
- Spring源码分析（一）预备篇=》基本知识储备
一.Spring框架整体,各个部分 .Spring Core Container Core 和 Beans 模块是框架的基础部分,提供 IoC (控制反转)和依赖注入特性. 这里的基础 概念是 Bea ...
- Kubernetes之Flannel介绍
Flannel是CoreOS团队针对Kubernetes设计的一个网络规划服务,简单来说,它的功能是让集群中的不同节点主机创建的Docker容器都具有全集群唯一的虚拟IP地址. 在Kubernetes ...
- windows上gedit 安装
1. 用浏览器打开https://wiki.gnome.org/Apps/Gedit 下载并安装 gedit 文本编辑器.这个操作无需管理员权限. 2. 把 gedit 放到桌面或者快速启动栏,这样你 ...
- js判断是否为空和typeof的用法
(1)typeof作用用于查看数据类型 (2)typeof用法typeof 返回值类型有number, string, boolean, function, undefined, objectPS:在 ...
- 实验吧之【简单的登录题(】CBC字节反转攻击)
开始刷ctf题吧 慢慢来. 实验吧---简单的登录题 题目地址:http://ctf5.shiyanbar.com/web/jiandan/index.php 随便提交一个id,看到后台set了两个 ...