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 ...
随机推荐
- 我用阿里云的虚拟云主机，也能配置https加密吗？
我用阿里云的虚拟云主机,也能配置https加密吗?答案是YES. 整个过程比想象中还要简单,都是一些基本的配置,虚拟主机 Web托管都可以很容易的搞定https. 首先我们要了解一下,阿里云是怎么支持 ...
- Linux 部署vsftp服务及详解
一.FTP服务概述: FTP服务器(File Transfer Protocol Server)是在互联网上提供文件存储和访问服务的计算机,它们依照FTP协议提供服务. FTP(File Transf ...
- Save&Load--Unity存档读档的学习总结
存档与读档功能 举例: 传统RPG游戏(仙剑.空之轨迹): 1.角色信息(生命值,等级) 2.道具信息(装备,药品) 3.场景信息(场景名称.角色坐标) 4.事件信息(任务相关) 关卡类游戏:关卡的通 ...
- docker 运行容器时指定--sysctl参数来设置系统参数
指定--sysctl参数来设置系统参数,通过这些参数来调整系统性能,Docker通过一个 ValidateSysctl函数来限制 sysctl参数可以传入的项,源码如下: // docker/opts ...
- office2019激活
这个是在网上偶然看见的一个激活方式,分享一下. 复制如下代码保存后修改文件后缀名为".bat",请注意有一个点,然后保存以管理员身份运行即可: @echo off(cd /d &q ...
- xpath语法分享
# xpath语法: ## 使用方式: 使用//获取整个页面当中的元素,然后写标签名,然后再写谓词进行提取.比如: ``` //div[@class='abc'] ``` ## 需要注意的知识点: 1 ...
- SpringBoot-ElasticJob封装快速上手使用(分布式定时器)
elastic-job-spring-boot qq交流群:812321371 1 简介 Elastic-Job是一个分布式调度解决方案,由两个相互独立的子项目Elastic-Job-Lite和Ela ...
- 智慧金融时代，大数据和AI如何为业务赋能
前言:宜信技术人物专访是宜信技术学院推出的系列性专题,我们邀请软件研发行业的优秀技术人,分享自己在软件研发领域的实践经验和前瞻性观点. 第一期专访我们邀请到宜信科技中心AI中台负责人王东老师,从大数据 ...
- TCP/IP协议介绍
一.什么是TCP/IP TCP/IP是一类协议系统,它是用于网络通信的一套协议集合 TCP/IP是供已连接因特网的计算机进行通信的通信协议 TCP/IP指传输控制协议/网际协议 TCP/IP定义了电子 ...
- e课表项目第二次冲刺周期第八天
昨天完成了什么? 昨天,我们组商量讨论了二层界面的设计,添加课程所需要的信息大概有:课程名称.教室.任课教师.上课时间.类型(单周.双周.单双周)以及备注等等.然后,我们通过界面的UI设计,让我们软件 ...