设置旋转元素的基点位置

语法

transform-orign:0 100% 0

transform-origin: x-axis y-axis z-axis;
x-axis

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

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

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

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

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

  • length

用%设置X,Y轴时的标准

CSS之transform-origin属性的更多相关文章

  1. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  2. 深入理解CSS变形transform(2d)

    × 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...

  3. CSS和JS样式属性对照表

    注意:1.CSS中的float属性是个例外,因为float是javascript的保留关键字,在IE中使用的是styleFloat,而其他浏览器则使用cssFloat. 盒子标签和属性对照 CSS语法 ...

  4. CSS动画:Transform中使用频繁的scale,rotate,translate动画

    动画中,skew只是transform中的一种形式的动画,我们还可以学习scale,rotate,translate.这是目前使用比较频繁的属性动作. 1.scale动画的定义:(单位数值) scal ...

  5. CSS变形transform(2d)

    前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...

  6. css的五种属性值----在路上(21)

    在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...

  7. 脚本化CSS类-HTML5 classList属性

    HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...

  8. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  9. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  10. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

随机推荐

  1. 倍数|计蒜客2019蓝桥杯省赛 B 组模拟赛(一)

    思路:从l枚举到r肯定超时,这时我们要转变思路!题目让我们求一个区间内的d的倍数,只需要求出r/d - l/d就是区间内d倍数的个数. 代码: #include <iostream> us ...

  2. hihoCoder week15 最近公共祖先·二

    tarjan求lca  就是dfs序中用并查集维护下,当访问到询问的第二个点u的时候  lca就是第一点的find(fa[v]) fa[v] = u; // 当v为u的儿子 且 v已经dfs完毕 #i ...

  3. android 控件获取 获取焦点

    控件.setEnabled(true);控件.setFocusable(true);控件.setFocusableInTouchMode(true);控件.requestFocus();控件.requ ...

  4. 怎么用mybatis

    一般mybatis的用法.mapper-spring-boot-starter  + PageHelper分页插件. 1,PageHelper分页插件 . https://blog.csdn.net/ ...

  5. Unity3D学习笔记(三十六):Shader着色器(3)- 光照

    光照模型:用数学的方法模拟现实世界中的光照效果.   场景中模型身上的光反射到相机中的光线: 1.漫反射:产生明暗效果 2.高光反射:产生镜面反射,物体中有最亮且比较耀眼的一部分 3.自发光: 4.环 ...

  6. Java基础 【Arrays 类的使用】

    package com.zuoyan.sort; import java.util.Arrays; public class ArraysClassDemo { public static void ...

  7. sublime 代码段

    demo 展示助手中有经常用到个标签. <textarea type="text/md_x" style="display:none"> ## de ...

  8. 【译】第16节---数据注解-Table

    原文:http://www.entityframeworktutorial.net/code-first/table-dataannotations-attribute-in-code-first.a ...

  9. 将实体类、匿名对象转换为SqlParameter列表

    /// <summary> /// <remarks> /// <para>将实体类/匿名对象转换为SqlParameter列表</para> /// ...

  10. Linux let 命令

    命令:let let 命令是 BASH 中用于计算的工具,用于执行一个或多个表达式,变量计算中不需要加上 $ 来表示变量.如果表达式中包含了空格或其他特殊字符,则必须引起来. 语法格式 let arg ...