精华内容
下载资源
问答
  • CSS transform中的rotate设置旋转中心

    千次阅读 2021-04-16 09:59:42
    我们没有使用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>

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

    展开全文
  • 2D旋转指的是让元素在2维平面内...角度为正时,是顺时针旋转,为负时,是逆时针旋转,例如transform:rotate(180deg)和transform:rotate(-180deg); 默认旋转中心点是以元素的中心点进行旋转。 改变旋转中心点:t

    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);
    }
    
    展开全文
  • transformrotate(90deg)transformrotate(-270deg) 顺时针旋转90° transformrotateX(90deg)沿x轴旋转90度 transform:rotateY(180deg)沿y轴旋转180度 通常为镜面翻转 <template> ...

     

     transform是css3属性。

    有时候UI给的原型图是图片旋转出来的,而作为前端应该怎样取使用旋转还原原型图呢。

    transform:scale(0.5)  缩放0.5倍

    transform:rotate(90deg) transform:rotate(-270deg)  顺时针旋转90°

    transform:rotateX(90deg)沿x轴旋转90度

    transform:rotateY(180deg)沿y轴旋转180度  通常为镜面翻转

    <template>
    	<view>
    		<image class="image1" src="../../static/tujidan.png" mode=""></image>
    
    		<image class="image2" src="../../static/tujidan.png" mode=""></image>
    	</view>
    </template>
    <script>
    export default {
    	data() {
    		return {};
    	},
    	methods: {}
    };
    </script>
    <style scoped>
    .image1 {
    	width: 600rpx;
    	height: 300rpx;
    
    	/* 镜像翻转180° */
    	transform: rotateY(180deg);
    }
    .image2 {
    	width: 600rpx;
    	height: 300rpx;
    	margin-top: 200rpx;
    
    	/* 顺时针旋转90° */
    	transform: rotate(90deg);
    }
    </style>
    

    展开全文
  • transform:rotateX(45deg);沿着x轴正方向旋转45度; transform:rotateY(45deg);沿着y轴正方向旋转45度; transform:rotateZ(45deg);沿着z轴正方向旋转45度; body { /*想看到3D透视效果需要给被观察元素的父元素添加...

    3D旋转指可以让元素在三维平面内沿着x轴,y轴,z轴或自定义轴进行旋转。
    语法格式:
    transform:rotateX(45deg);沿着x轴正方向旋转45度;
    transform:rotateY(45deg);沿着y轴正方向旋转45度;
    transform:rotateZ(45deg);沿着z轴正方向旋转45度;

    body {
    /*想看到3D透视效果需要给被观察元素的父元素添加透视*/
         perspective: 300px;
     }
    .box{
        width: 150px;
        height: 150px;
        margin: 50px auto;
        background-color: skyblue;
        transition: all .3s;
    }
    .box:hover {
    /*沿着x轴正方向旋转90deg*/
        transform: rotateX(90deg);
    }
    

    3D呈现transform-style

    • 控制子元素是否开启三维立体环境;
    • transform-style:flat,表示子元素不开启3d立体空间,默认就是flat;
    • transform-style:preserve-3d,表示子元素开启3d立体空间
    • 该代码还是写给父级,影响的是子盒子
    body {
         perspective: 300px;
         transform-style: preserve-3d;
    }
    .box,
    .box2 {
          position: absolute;
          width: 150px;
          height: 150px;
          top: 50px;
          left: 50%;
          margin-left: -75px;
          background-color:pink;
          transition: all .3s;
          transform: rotateY(-70deg);
    }
    .box2 {
          background-color: skyblue;
    }
    .box2:hover {
         transform: rotateX(90deg);
    }
    

    呈现出来的是这样一个3D效果:
    在这里插入图片描述
    如果不给父盒子添加transform-style: preserve-3d;就会呈现出2D效果,如下:
    在这里插入图片描述

    展开全文
  • doctype htmlhtml lang=enhead meta charset=UTF-8 titleDocument/title style /*如果使用的不是webkit浏览器 请将代码中的注释都去掉就可以看到效果*/ @-webkit-keyframes clockwiseRotate{ to { transform:rotate...
  • transform:rotate

    2021-02-19 20:03:52
    今天是接着上一次transform,来讲它里面另一个属性 旋转-rotate。可以看到下面张图片里有三个圆形,从最左边开始是在它的初始值,然后以360px旋转一周回到原点,为了区分可以在结束后动画时更换了个背景颜色以方便...
  • 我们再试用jquery获取样式的时候是通过$('domName').css('transform');的方式来获取元素的css样式,但是通过它...我们要想获取真正的旋转角度值就需要通过一系列的处理来过去,具体方法是:Document#divTransform...
  • transform动画,从黑橙黄蓝红顺时针旋转。红的到黑的,而从288逆时针旋转回到0。不知道怎么让他继续顺时针旋转到黑色部分。.anm2-circle-s.bg-b{background-color:#000;-webkit-transform: ro...
  • Document#divTransform {margin: 30px;width: 200px;height: 100px;background-color: .../* Rotate div */transform: rotate(9deg);-ms-transform: rotate(9deg);/* Internet Explorer */-moz-transform: rotat...
  • 转自竹音林,只为自己笔记,以备不时之需如果使用$(objName).css('transform')来获取CSS3里transform rotate旋转角度的度数,得到的是矩阵matrix(a,b,c,d,e,f)看到这个矩阵,很多人都是一脸蒙蔽的那么想获取rotate的...
  • 在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。旋转图片HTML代码CSS代码img{border: #000 solid 2px;display: ...
  • 我用span标签写的图标,发现并没有旋转。代码如下 <div class="weather-ws"> <span :style="{transform:item.wsDirect !== 'NaN'? getRorate(item.wsDirect):'rotate(0)'}" class="wind-direction" &...
  • CSS3旋转图片.demo {width: 100px;height: 75px;background-color: yellow;border: 1px solid black;margin:20px;}#div2 {transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-moz-transform: ...
  • 旋转(旋转 rotate) transform:rotate(45deg); 控制中心点(原点 origin) transform-origin:150px 100px; 动画 (transition) transition:all .5s ease-in 0s; <!DOCTYPE html> <html lang="zh-CN"> <h
  • 这是我第一次写博客,也是想和大家分享一些学习过程,同时也是记录一下自己的学习过程,最进无聊,想写一个游戏,想了很久就想写个简单的弹幕游戏,但是我希望的操控的对象可以不停的旋转,然后就接触到了rotate这个方法,...
  • CSS语言:CSSSCSS确定body {background-color: #111;}.mrloader .inner-loader {position: absolute;left: 50%;top: 50%;z-index: 1;-webkit-transform: translateX(-50%) ...transform: translateX(-50%) ...
  • CSS的rotate只 对block或 inline-block类型元素有效
  • cube3D立方体body {margin: 0px;padding: 0px;... /*设置景深*/transform-style: preserve-3d;}#triangle div {position: absolute;width: 200px;height: 200px;border: 1px solid red;}#triangle:hover {...
  • 一、三维坐标系 三维直角坐标系其实是指立体空间,立体空间是由3个轴共同组成的 x轴:水平向右 x右边是正值,左边为负值 y轴:垂直向下 y下面是正值,上面是负值 z轴:垂直屏幕 往外是正值,往... transform: tra
  • 解决css转盘游戏中transform:rotate不能多次转动问题 用css的transform属性实现的转盘游戏,都是让元素转动指定的角度来实现抽奖的目的。 假如我们的转盘被分成了八份,每一份就是45度,如下图: 当我们要抽中某一...
  • CSS3详解:transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]transform的属性包括:rotate() / skew() / scale() / translate(x,y) ,分别还有x、y之分,比如:rotatex() 和 rotatey()...
  • div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o-transform:rotate(7deg); /...
  • CSS3 transform平面旋转

    2021-08-04 07:39:40
    CSS3 transform平面旋转1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切.weiyi,.suofang,.xuanzhuan,.xieqie{width: 100px;...
  • rotate() [旋转]

    2021-08-04 04:12:47
    CSS.rotate_clockwise{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);position:absolute;left:10px;top:80px;}.rotate_anticlockwise{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45...
  • 代码样式如下:test@charset "utf-8";/* CSS Document */html,body,div,span,a,img,form,p,h1,h2,h3,h4,h5,ul,dl,dt,dd,li {margin:0;padding:0;...min-height:100%;font-size:16px;font-family:"Micros...
  • CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园2018-09-26在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做...
  • } .animate:hover{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity:1; background:#1ec7e6; width:90px; height:60px; ...
  • CSS3 transform是什么?transform的含义是:改变,使…变形;转换CSS3 transform都有哪些常用属性?transform的属性包括:rotate() / skew() / scale() / translate...360°旋转 修改rotate(旋转度数)transform:rota...
  • css3中的变形处理——transform功能(旋转、缩放、倾斜、移动)标签: css3 变形处理 transform功能 个人分类: css3 1 transform属性在css3中,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中...
  • rotate旋转

    2021-07-29 23:36:11
    rotate旋转)介绍注: 介绍 通过旋转可以使元素沿着 x、y 或 z 旋转指定的角度 rotateX() rotateY() rotateZ() transform: rotateZ(45deg); transform: rotateZ(.5turn); transform: rotateX(45deg); ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,906
精华内容 16,762
关键字:

rotate的旋转中心transform