全国服务热线:4008-888-888

技术知识

CSS transform

序言

近期做的1个烟火动漫,便是烟火散开的动漫,在动漫的完成全过程中,关键在烟火转动全过程中卡住了,后来发现关键对transform-origin特性了解不深,特意找了个事例来训练,加深了对特性的了解。

transform-origin功效

这个特性是用来更改元素形变的原点,1般用来相互配合转动来应用数最多。接受主要参数可为1个、两个、3个。当为两个值,各自意味着间距盒实体模型左边的值,如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编码能够看出,大家设定了转动管理中心为第1个竖线的(3,105)px为原点开展转动,这里的间距为间距盒实体模型左边的值,了解这1点,便可以写出别的的时针了,随后各自转动便可获得时针。因为没理解这里的赋值时相对哪一个部位开展测算的,因此踩了很多的坑。

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(⑷5deg);
}
.hour:nth-child(5) {
  transform:rotate(⑼0deg);
}

参照

MDN

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服