transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

为了更好地理解Transform-Origin属性，请查看这个演示.

x-axis

定义视图被置于 X 轴的何处。可能的值：

  • left
  • center
  • right
  • length
  • %
y-axis

定义视图被置于 Y 轴的何处。可能的值：

  • top
  • center
  • bottom
  • length
  • %
z-axis

定义视图被置于 Z 轴的何处。可能的值：

  • length
 
<!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盒子旋转位置的更多相关文章

  1. iOS transform解决连续多次旋转缩放，实现图片旋转缩放效果

    一.需求 实现imageView的缩放旋转效果,一般有两种方式: 1.底层加scrollview,利用scrollview的属性实现.(推荐这种,这是我比较后发现的,手势做缩放旋转会有点弊端) 2.利 ...

  2. CSS3 transform rotate（旋转）锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  3. css3动画属性系列之transform细讲旋转rotate

    1.语法: transform: none |  <transform-function> [<transform-function>]* 2.取值: none         ...

  4. 【转】Unity3D Transform中有关旋转的属性和方法测试

    Transform有关旋转个属性和方法测试 一,属性 1,var eulerAngles : Vector3 public float yRotation = 5.0F; void Update()  ...

  5. javascrip总结42:属性操作案例: 点击盒子,改变盒子的位置和背景颜色

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  6. CSS3 transform rotate（旋转）锯齿/元素抖动模糊的解决办法

    使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...

  7. 【转】IOS屏幕旋转与View的transform属性之间的关系，比较底层

    iTouch,iPhone,iPad设置都是支持旋转的,如果我们的程序能够根据不同的方向做出不同的布局,体验会更好. 如何设置程序支持旋转呢,通常我们会在程序的info.plist中进行设置Suppo ...

  8. JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置

    ---恢复内容开始--- 圆角矩形 border-radius:50%  40%  30%  33px:   像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 ...

  9. transform旋转，平移，缩放，扭曲 斜切

    transform  改变rotate 旋转translate  位移scale 缩放 skew  斜切变形 记得兼容性:-webkit-   -moz-    -ms-     -o- transf ...

随机推荐

  1. 有了 CompletableFuture，使得异步编程没有那么难了！

    本文导读: 业务需求场景介绍 技术设计方案思考 Future 设计模式实战 CompletableFuture 模式实战 CompletableFuture 生产建议 CompletableFutur ...

  2. Angular2+之使用FormGroup、FormBuilder和Validators对象控制表单（取值、赋值、校验和是否可编辑等）

    1.要使用Angular自带的表单控制需要先引入相关模块(.ts文件): import { FormGroup, //表单对象类 FormBuilder, //表单生成工具类 Validators} ...

  3. 【柠檬班】jmeter 不写代码，秒秒钟提取动态列表最后一个值

    在用jmeter做接口测试时,我们经常会遇到,一个接口返回一个json串,在这个json串中,某个节点的值是一个列表,而且这个列表的长度是动态变化的.如:   获取用户列表,用户信息是个列表,类似的接 ...

  4. win7环境搭建以太坊私链

    如何创建私链: 创建创世配置文件: 首先需要创建一个“创世”json配置文件,此文件描述了创世区块的一些参数.下面就是文件中的内容: { "coinbase": "0x0 ...

  5. 你也可以写聊天程序 - C# Socket学习1

    简述 我们做软件工作的虽然每天都离不开网络,可网络协议细节却不是每个人都会接触和深入了解.我今天就来和大家一起学习下Socket,并写一个简单的聊天程序. 一些基础类 首先我们每天打开浏览器访问网页信 ...

  6. Python3 os.path() 模块

    os 模块提供了非常丰富的方法用来处理文件和目录.常用的方法如下表所示: 序       号 方法及描述 1 os.access(path, mode):检验权限模式 2 os.chdir(path) ...

  7. 转：python2.x 和 python3.x的区别

    注:本文的原文地址为Key differences between Python 2.7.x and Python 3.x 许多 Python 初学者想知道他们应该从 Python 的哪个版本开始学习 ...

  8. Bribe the Prisoners SPOJ - GCJ1C09C

    Problem In a kingdom there are prison cells (numbered 1 to P) built to form a straight line segment. ...

  9. LeetCode初级算法--数组01：只出现一次的数字

    LeetCode初级算法--数组01:只出现一次的数字 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn. ...

  10. 代码审计-Thinkphp3框架EXP表达式SQL注入

    最近看java框架源码也是看的有点头疼,好多还要复习熟悉 还有好多事没做...慢慢熬. 网上好像还没有特别详细的分析 我来误人子弟吧. 0x01 tp3 中的exp表达式 查询表达式的使用格式: $m ...