精华内容
下载资源
问答
  • 我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用...

    transform-origin属性

    默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处。
    我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。
    如果我们把元素变换原点(transform-origin)设置0(x) 0(y),这个时候元素的变换原点转换到元素的左顶角处。

    transform-origin属性值可以是百分比、em、px等具体的值,也可以是top、right、bottom、left和center这样的关键词。

    2D的变形中的transform-origin属性可以是一个参数值,也可以是两个参数值。如果是两个参数值时,第一值设置水平方向X轴的位置,第二个值是用来设置垂直方向Y轴的位置。

    3D的变形中的transform-origin属性还包括了Z轴的第三个值。其各个值的取值简单说明如下:

    • x-offset:用来设置transform-origin水平方向X轴的偏移量,可以使用<length>和<percentage>值,同时也可以是正值(从中心点沿水平方向X轴向右偏移量),也可以是负值(从中心点沿水平方向X轴向左偏移量)。
    • offset-keyword:是top、right、bottom、left或center中的一个关键词,可以用来设置transform-origin的偏移量。
    • y-offset:用来设置transform-origin属性在垂直方向Y轴的偏移量,可以使用<length>和<percentage>值,同时可以是正值(从中心点沿垂直方向Y轴向下的偏移量),也可以是负值(从中心点沿垂直方向Y轴向上的偏移量)。
    • x-offset-keyword:是left、right或center中的一个关键词,可以用来设置transform-origin属性值在水平X轴的偏移量。
    • y-offset-keyword:是top、bottom或center中的一个关键词,可以用来设置transform-origin属性值在垂直方向Y轴的偏移量。
    • z-offset:用来设置3D变形中transform-origin远离用户眼睛视点的距离,默认值z=0,其取值可以<length>,不过<percentage>在这里将无效。

    看上去transform-origin取值与background-position取值类似。为了方便记忆,可以把关键词和百分比值对比起来记:

    • top = top center = center top = 50% 0
    • right = right center = center right = 100%或(100% 50%)
    • bottom = bottom center = center bottom = 50% 100%
    • left = left center = center left = 0或(0 50%)
    • center = center center = 50%或(50% 50%)
    • top left = left top = 0 0
    • right top = top right = 100% 0
    • bottom right = right bottom = 100% 100%
    • bottom left = left bottom = 0 100%

    可以看一下效果,一个圆围绕自己的中心点不停地旋转

    css部分:

    
    #cl{
          width:200px;
          height:200px;
          background:#f99;
          margin:0 auto;
          text-align: center;
          font:800 100px/200px "TypeLand 康熙字典體試用版";
          border-radius: 50%;
          animation: myfirst 2s infinite linear;
          transform-origin:center 50%;
          /*transform-origin:20% 50%; 定元素的基点位置*/
          /*-moz-transform:rotate(45deg);
          -webkit-transform:rotate(45deg);
          -o-transform:rotate(45deg);
          -ms-transform:rotate(45deg);
          transform:rotate(45deg);*/
        }
        @keyframes myfirst
        {
          from {transform: rotate(0);}
          to {transform: rotate(360deg);}
        }
    

    html部分:

    <div id="cl">
      福
    </div>

    可以看出一个圆绕着中心点不停地旋转

    展开全文
  • 我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用...

    transform-origin属性

    默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处。
    我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。
    如果我们把元素变换原点(transform-origin)设置0(x) 0(y),这个时候元素的变换原点转换到元素的左顶角处。
    transform-origin属性值可以是百分比、em、px等具体的值,也可以是top、right、bottom、left和center这样的关键词。

    2D的变形中的transform-origin属性可以是一个参数值,也可以是两个参数值。如果是两个参数值时,第一值设置水平方向X轴的位置,第二个值是用来设置垂直方向Y轴的位置。

    3D的变形中的transform-origin属性还包括了Z轴的第三个值。其各个值的取值简单说明如下:

    • x-offset:用来设置transform-origin水平方向X轴的偏移量,可以使用<length>和<percentage>值,同时也可以是正值(从中心点沿水平方向X轴向右偏移量),也可以是负值(从中心点沿水平方向X轴向左偏移量)。
    • offset-keyword:是top、right、bottom、left或center中的一个关键词,可以用来设置transform-origin的偏移量。
    • y-offset:用来设置transform-origin属性在垂直方向Y轴的偏移量,可以使用<length>和<percentage>值,同时可以是正值(从中心点沿垂直方向Y轴向下的偏移量),也可以是负值(从中心点沿垂直方向Y轴向上的偏移量)。
    • x-offset-keyword:是left、right或center中的一个关键词,可以用来设置transform-origin属性值在水平X轴的偏移量。
    • y-offset-keyword:是top、bottom或center中的一个关键词,可以用来设置transform-origin属性值在垂直方向Y轴的偏移量。
    • z-offset:用来设置3D变形中transform-origin远离用户眼睛视点的距离,默认值z=0,其取值可以<length>,不过<percentage>在这里将无效。

    看上去transform-origin取值与background-position取值类似。为了方便记忆,可以把关键词和百分比值对比起来记:

    • top = top center = center top = 50% 0
    • right = right center = center right = 100%或(100% 50%)
    • bottom = bottom center = center bottom = 50% 100%
    • left = left center = center left = 0或(0 50%)
    • center = center center = 50%或(50% 50%)
    • top left = left top = 0 0
    • right top = top right = 100% 0
    • bottom right = right bottom = 100% 100%
    • bottom left = left bottom = 0 100%
    可以看一下效果,一个圆围绕自己的中心点不停地旋转
    css部分:
    <style>
    #cl{
          width:200px;
          height:200px;
          background:#f99;
          margin:0 auto;
          text-align: center;
          font:800 100px/200px "TypeLand 康熙字典體試用版";
          border-radius: 50%;
          animation: myfirst 2s infinite linear;
          transform-origin:center 50%;
          /*transform-origin:20% 50%; 定元素的基点位置*/
          /*-moz-transform:rotate(45deg);
          -webkit-transform:rotate(45deg);
          -o-transform:rotate(45deg);
          -ms-transform:rotate(45deg);
          transform:rotate(45deg);*/
        }
        @keyframes myfirst
        {
          from {transform: rotate(0);}
          to {transform: rotate(360deg);}
        }
    </style> 
    html部分:
    <div id="cl"></div>

    可以看出一个圆绕着中心点不停地旋转

    转载于:https://www.cnblogs.com/sdcs/p/8203653.html

    展开全文
  • 转换(transform)是CSS3中具有颠覆性特征之一,可以实现元素位移translate、旋转rotate、缩放scale等效果。 一、二维坐标系 2向右和向下变大二、2D转换之移动translate 2D移动是2D转换里面一种功能,可以...

    转换(transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移translate、旋转rotate、缩放scale等效果。

    一、二维坐标系

    2向右和向下变大

    二、2D转换之移动translate

    2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位

    1. 语法

    transform: translate(x,y);  //或者分开写
    transform:translateX(n);
    transform:translateY(n);

     2. 重点

    • 定义2D转换中的移动,沿着X和Y轴移动元素
    • translate最大的优点:不会影响到其他元素的位置
    • translate中的百分比单位是相对于自身元素的宽度或高度,translate:(50%,50%);
    • 行内标签没有效果

    三、2D转换之旋转rotate

    2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。 

    1. 语法 

    transform: rotate(度数);

    2. 重点

    • rotate里面跟度数,单位是deg 比如 rotate(45deg) 
    • 角度为正时,顺时针,负时,为逆时针
    • 默认旋转的中心是元素的中心点

    3. 案例

    向下三角由正方形的一个直角旋转而来,且鼠标经过时此三角上下旋转
    <style>
        div {
            position: relative;
            width: 250px;
            height: 35px;
            border: 1px solid #000;
        }
        div::after {
            content:"";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }
    /* 鼠标经过div 里面的三角旋转 */
        div:hover::after {
            transfoem: rotate(225deg);
        }
    </style>
    <body>
        <div></div>
    </body>

    四、2D旋转中心点transform-origin

    可以设置元素转换的中心点

    1. 语法

    transform-origin: x y;

    2. 重点

    • 注意后面的参数x和y用空格隔开
    • x y默认转换的中心点是元素的中心点(50% 50%)等价于 center
    • 还可以给x y设置 像素 或者 方位名词 (top bottom left right center) 

    3. 案例 

    <style>
        div {
            overflow: hidden;    
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
        }
        div::before {
            content:"我出现了";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg)
            transform-origin: left bottom;
            transition: all 0.4s;
        }
        div:hover::before { 
            transform:rotate(0deg);
    </style>
    <body>
        <div></div>
    </body>

    五、2D转换之缩放scale

    可以放大和缩小,只要给这个元素添加上了这个属性就能控制它放大还是缩小

    1. 语法

    transform: scale(x,y);

    2. 注意

    • 注意其中的x和y用逗号分隔
    • transform:scale(1,1):宽和高都放大了一倍,相当于没有放大
    •  transform:scale(2,2):宽和高都放大了2倍
    • transform:scale(2):只写了一个参数,第二个参数则和第一个参数一样,相当于scale(2,2)
    • transform:scale(0.5,0.5):缩小
    • scale缩放最大的优势:可以设置转换中心点缩放(默认是以中心点缩放),而且不影响其他盒子

    3. 案例

    当鼠标经过某个按钮即放大
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }
        li:hover {
            transform: scale(1.2)
        }
    </style>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>

    六、2D转换综合写法

     注意:

    • 同时使用多个转换器,其格式为:transform:translate() rotate() scale()...等
    • 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
    • 当同时有位移和其他属性时,要将位移放最前面

     

     

     

     

     

     

    展开全文
  • rotate里面跟是度数,单位是deg,例如transform:rotate(180deg),就是说旋转180度; 角度为正时,是顺时针旋转,为负时,是逆时针旋转,例如transform:rotate(180deg)和transform:rotate(-180deg); 默认旋转的...

    2D旋转指的是让元素在2维平面内顺时针或逆时针进行旋转。(和transition过渡搭配使用效果体验更好)
    语法格式:
    transform:rotate(度数);
    注意点:
    rotate里面跟的是度数,单位是deg,例如transform:rotate(180deg),就是说旋转180度;
    角度为正时,是顺时针旋转,为负时,是逆时针旋转,例如transform:rotate(180deg)和transform:rotate(-180deg);
    默认旋转的中心点是以元素的中心点进行旋转。

    改变旋转的中心点:transform-origin
    我们可以设置元素以哪个位置来进行旋转。
    语法格式:
    transform-origin:x y;
    注意点:
    后面的参数x和y用空格隔开,不是逗号;
    xy默认转换的中心点是元素的中心点(50% 50%);
    还可以给xy设置像素或方位名词,例如:top bottom left right center。
    如果想让元素以左下角为中心点旋转,可以这样写:

    div {
    		width: 120px;
    		height: 120px;
    		background-color: pink;
    		/*跟方位名词,表示左下角 右下角就是 right bottom*/
    		transform-origin: left bottom;
    		transition: all .6s;
    }
    div:hover {
    		/*跟方位名词,表示左下角 右下角就是 right bottom*/
    		transform: rotate(180deg);
    }
    
    展开全文
  • 最近需要做一个旋转转盘抽奖小组件,初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘偏转角度值,来达到转动效果。 使元素围绕中心根据角度偏转,在元素...
  • 最近需要做一个旋转转盘抽奖小组件,初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘偏转角度值,来达到转动效果。 使元素围绕中心根据角度偏转,在元素...
  • (没有设置transform-origin 属性也可以,只不过是根据该元素的中心旋转,也就是center center) transform-origin 是根据自己而定位,所以 0px 0px 就是左上角那个点 rotateX : 沿着x轴进行旋转 rotateY:沿着y...
  • 在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。一.旋转 rotate用法:transform: rotate(45deg);共一个参数“角度”,单位deg为度的意思,...
  • rotate一、rotate1.rotate2.rotateXYZ3.rotate3d4.实例 一、rotate 1.rotate 正常情况下以transform-origin为变换中心,值正为顺时钟,负为逆时针。 div.box{ width: 100px;...以左顶点为旋转中心顺时钟旋
  • (没有设置transform-origin 属性也可以,只不过是根据该元素的中心旋转,也就是center center) 加上 transform-origin 设置旋转点。transform-origin 是根据自己而定位,所以 0px 0px 就是左上角那个点。 ro
  • 在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。 注意:都是以中心点为原点进行移动旋转缩放倾斜的。 skew的默认原点是transform-origin是这个物件的中心点。 ...
  • 1、先上图 2、以x轴为例,y、z轴一样道理,学习时关注三句话即可豁然开朗。。。 【 ... 第一、x、y轴分别为标签中心线,z轴垂直标签中心点 ... 第二、围绕x轴旋转时,... 例1 : { transform: rotateX(90deg) tr...
  • 2D转换分类有:移动(translate),旋转rotate),缩放(scale)。 2D转换之translate 2D移动translate可以改变元素在页面中位置,类似定位。 移动tranlate语法格式如下: transform: translate(x,y); ...
  • 我想在IE9下实现点击按钮进行图片翻转,之前使用了滤镜,但有一个问题,图片在旋转时不是以图片中心为定点进行旋转,在网上查了css3一个属性transform 可以实现以中心点进行旋转,但试了好多,都没实现,下面是...
  • 1.旋转rotate -- 可以让元素在2维平面顺时针或者逆时针旋转 1.语法: ... - 默认旋转的中心点是元素的中心点 2.转换中心transform-origin -- 设置元素转换的中心点 1.语法: transform-orig...
  • CSS3 变形--旋转 rotate()

    2019-02-24 19:04:54
    rotate()旋转旋转rotate(-30deg)函数通过指定角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。 如果这个值为正值,元素相对原点中心顺时针旋转; 如果这个...
  • 在SVG中旋转图形,需要设置各个图形的旋转中心点; 基本语法源自CSS,如: div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-...
  • 在CSS3中提供了transformtransform-origin两个用于实现2D变换属性,其中transform属性用于实现平移、缩放、旋转和倾斜等2D变换,transform-origin用于设置中心变换; 1.2 应用transform属性实现旋转 应用...
  • 移动 translate 语法: transform:translate(x,y) transform:translateX(x) transform:translateY(y) ...1.不会影响其他元素位置 ...旋转 rotate 语法: transform:rotate(度数deg) 重点...
  • <!... <... <head> ...meta charset="UTF-8">... /*核心:这些都是以div正中心开始旋转的.仔细看看文字,记住每一个文字开始都是在左上角为0deg。 你可以理解四个角是0deg 90deg 180deg 270deg,注意一下原点
  • transform 改变rotate 旋转translate 位移scale 缩放 skew 斜切变形记得兼容性:-webkit- -moz- -ms- -o-transform: rotate(Xdeg,Ydeg);deg 表示角度 X轴正半轴为0... 设置对象旋转的中心点,如果没设置该值,默认...
  • transform 是实现是元素变形(静态)...transform-origin: x, y 主要结合rotate来使用 规定旋转的中心点再哪 transform:scale() 缩放 transform:skew() 倾斜transition是实现是动画过程主要使用有transiti
  • html图片旋转有3中方式:ie 滤镜,CSS3transform,... 可以通过给它传递一个 rotate(度数) 值来旋转一个元素,正值表示顺时针方向旋转,负值表示逆时针方向旋转旋转的中心点为元素的中心。 浏览器...
  • Unity三个旋转函数都位于Transform中 RotateAroundLocal,RotateAround 这两个函数都过时了,用Rotate 可以完全代替这两个函数。这一些老旧项目依然可以看到他们。 RotateAroundLocal 没有重载 就一个方法 public ...
  • transform

    2020-08-05 17:41:04
    transform(变形属性) translate : 位移 translateX translateY translateZ ( 3d ) scale : 缩放 (**值是一个比例值,...rotate : 旋转 ( **旋转的值,单位是角度 deg** ) rotateX (3d) rotateY (3d) rotateZ
  • 一、rotate 2d旋转指是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform ...二、设置元素旋转中心点(transform-origin) transform-origin 基础语法 transform-origin: x
  • transform是CSS3里变换属性,常用有translate(平移)、rotate旋转)、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值,其具有独立语法,但值得注意是,transform-origin必须...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 217
精华内容 86
关键字:

rotate的旋转中心transform