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. Python简单的登录注册代码

    #-*- coding: utf-8 -*- import hashlib # 定义数据库(声明字典) #注册登录的简单hash处理 db={} def get_md5(password): md5= ...

  2. JQuery .width()/.css("width")方法 比较

    1. 获取到的值的区别 获取到的为实际宽度,不包括 内边距 和 边框: <div id="aa"> ...... </div> // 1. width() ...

  3. phaser学习总结之Text对象详解

    前言 在phaser学习总结之phaser入门教程中,我们已经入门了phaser,对phaser也有所了解但是我们并没有对phaser中的每个对象的属性和方法进行详解,本章将对phaser中的Text ...

  4. TP5安装workerman版本的坑

    今天想在TP5上安装workerman,用于个人学习,然后悲剧的是,第一步就卡住了,根据手册里说的首先通过composer安装 composer require topthink/think-work ...

  5. bootstrap具体知识点(2)

    3.以移动设备为优先 <meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no”> ...

  6. JavaScript中闭包的使用和各种继承介绍

    一.什么是闭包?     (1)闭包的概念:a.闭包就是函数嵌套时,让局部变量变成自由变量的环境,是一种让局部变量进化的方式.                 b.定义在一个函数内部的函数.      ...

  7. [ASP.NET Core 3框架揭秘] 跨平台开发体验: Docker

    对于一个 .NET Core开发人员,你可能没有使用过Docker,但是你不可能没有听说过Docker.Docker是Github上最受欢迎的开源项目之一,它号称要成为所有云应用的基石,并把互联网升级 ...

  8. Dubbo和Zookerper的关系

    1.Dubbo的作用 Dubbo是管理中间层的工具,在业务层到数据仓库间有非常多服务的接入和服务提供者需要调度,dubbo提供一个框架解决这个问题.Dubbo基于RPC(Remote Procedur ...

  9. wsgi相关的

    目录 web 本质 http协议 请求方式 响应状态码 请求与响应文本格式 目录 web 本质   本质就是浏览器和服务器进行通信, http协议   也叫超文本传输协议(英文:HyperText T ...

  10. 在我的新书里，尝试着用股票案例讲述Python爬虫大数据可视化等知识

    我的新书,<基于股票大数据分析的Python入门实战>,预计将于2019年底在清华出版社出版. 如果大家对大数据分析有兴趣,又想学习Python,这本书是一本不错的选择.从知识体系上来看, ...