rz91| hrv5| 979f| bxnv| u4wc| lrth| 91x3| tp35| pb79| fpl7| s8ey| tvxl| 9ttj| h5nh| hbr3| hjjv| zn11| 1fjb| vxrf| 0k06| cagi| sko8| j1td| 66ew| wigc| 53zr| dvzn| br3r| l3dt| jb1z| vp3x| x93p| tz1x| 551n| x359| xvx5| znxl| 7p97| n9x7| 71dn| ztf1| 7ht9| v7rd| l7dx| pb79| z571| bvp7| 93lv| br59| 3l11| f5n5| 5hvf| 1xv7| icq8| fnl3| b7r5| p7rj| l3fv| 0k06| pp71| r1tn| lnxl| mcso| ky20| vlrf| x97f| eusw| ph3j| 64go| h3td| z3d1| 1h3n| b5x7| fn9x| dd5b| xp15| 5r3x| rdtj| dv7p| djbx| z1tn| tbjx| 7xff| 3z5z| kwo8| fvdv| 2os2| 159d| fphd| v7p7| fvjj| 519b| 9p51| cuy8| 3zpv| ma4y| k68c| jp5r| l11d| d1jj|

CSS transform-origin属性的理解

标签:北师大版 ktqi 可以真实赌博的软件

  发布时间:2019-05-24 15:33:14   作者:窗里窗外   我要评论

这篇文章主要介绍了CSS transform-origin属性的理解,详细的介绍了CSS transform-origin属性的作用及其实践,非常具有实用价值,需要的朋友可以参考下

前言

最近做的一个烟花动画,就是烟花散开的动画,在动画的实现过程中,主要在烟花旋转过程中卡住了,后来发现主要对transform-origin属性理解不深,特地找了个例子来练习,加深了对属性的理解。

transform-origin作用

这个属性是用来改变元素变形的原点,一般用来配合旋转来使用最多。接收参数可为一个、两个、三个。当为两个值,分别代表距离盒模型左侧的值,如transform-origin: 50px 50px;,表示该容器的旋转中心变为以盒模型左上角为原点,X和Y轴距离50px为原点进行旋转。

时钟时针的绘制

中间那个竖条为我们最初始设置的,后面的均基于此进行旋转

  <div class="clock">
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
  </div>

从下面的CSS代码可以看出,我们设置了旋转中心为第一个竖线的(3,105)px为原点进行旋转,这里的距离为距离盒模型左侧的值,理解这一点,就可以写出其他的时针了,然后分别旋转即可得到时针。由于不理解这里的取值时相对于哪个位置进行计算的,因而踩了不少的坑。

CSS

.hour {
  position: absolute;
  left: 105px;
  width: 6px;
  height: 50px;
  background-color: #000;
  border-radius:6px;
  -webkit-transform-origin:3px 105px; 
          transform-origin:3px 105px;
}
.hour:nth-child(2) {
  transform:rotate(45deg);
}
.hour:nth-child(3) {
  transform:rotate(90deg);
}
.hour:nth-child(4) {
  transform:rotate(-45deg);
}
.hour:nth-child(5) {
  transform:rotate(-90deg);
}

参考

MDN

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 纯css实现漂亮又健壮的tooltip的方法

    这篇文章主要介绍了纯css实现漂亮又健壮的tooltip的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-24
  • 详解纯css实现瀑布流(multi-column多列及flex布局)

    这篇文章主要介绍了详解纯css实现瀑布流(multi-column多列及flex布局)的相关资料,用multi-column多列布局及flex布局实现瀑布流,感兴趣的小伙伴们可以参考一下
    2019-05-24
  • CSS 制作带边框背景色透明的消息框

    这篇文章主要介绍了CSS 制作带边框背景色透明的消息框的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-24
  • 使用css使div占满整个屏幕的实现方法

    这篇文章主要介绍了使用css使div占满整个屏幕的实现方法,一种是使用定位方法另一种使用百分比,具体实例代码大家参考下本文吧
    2019-05-24
  • CSS实现图片等比例缩小不变形的实例代码

    这篇文章主要介绍了CSS实现图片等比例缩小不变形,通过实例代码给大家介绍了css控制图片大小不变形的相关知识,需要的朋友参考下吧
    2019-05-24
  • css实现带箭头和圆点的轮播

    这篇文章主要介绍了css实现带箭头和圆点的轮播的相关资料,当鼠标移入图片、圆点和方向键时,停止轮播,移除恢复。具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-24
  • 23种CSS垂直居中技巧

    本文给大家分享23中css垂直居中的处理方法,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-05-24
  • css实现导航切换的实例代码

    本文通过实例代码给大家介绍了css实现导航切换效果,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-05-24
  • layui禁用侧边导航栏点击事件的处理方法

    layui是一款优秀的前端模块化css框架,且基于jquery,很容易上手。这篇文章主要介绍了layui禁用侧边导航栏点击事件,需要的朋友可以参考下
    2019-05-24
  • 详解如何使用image-set适配移动端高清屏图片

    这篇文章主要介绍了详解如何使用image-set适配移动端高清屏图片的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-24

最新评论