CSS transform-origin的理解

付永刚发布于2019-08-29 16:13 / 1289人阅读

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

前言

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

transform-origin作用

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

时钟时针的绘制

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

从下面的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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113604.html

巧妙使用transform实现环形路径平移动画

摘要：参考环形路径平移的方案，做一些调整，就可以得到型路径平移的写法这里初始把元素放在了上面那个半圆环的圆心，然后在的关键帧位置切换为下面的半圆环路径。最近在CSS Secrets一书看到了这样一节：让一个元素沿环形路径平移。这是一个css动画的问题，但却没有看上去那么简单，其关键点是元素是平移的，也就是说，元素自身并不发生旋转，只是稳定地沿着一个环形的路径移动，像这样： showImg(...

KevinYan 2019-08-29 11:31 评论0 收藏0
CSS3 变换

摘要：概览变换也叫转换，主要包括以下几种旋转扭曲缩放和移动以及矩阵变形。变换没有扭曲操作，有移动，旋转，缩放。三，取消的变换，将变换应用到上并置于缩放前，改变缩放值，没有任何变化。概览 CSS3 变换也叫 2D/3D转换，主要包括以下几种：旋转(rotate) 、扭曲 (skew) 、缩放(scale) 和移动(translate) 以及矩阵变形(matrix) 。transform ...

wayneli 2019-08-28 18:22 评论0 收藏0
玩转CSS 3D -正四面体与正六面体

摘要：简单来说，就是非常对称的立方体，而且每一个面都是由正多边形组成，因此在这一篇，将会画出正四面体正六面体。完成之后应该就会顺利地看到一个正六面体，这时候我们可以改变的，可以更加清楚。我们理解了CSS 3D的个中原理之后，废话就不用多说，直接来画正多面体吧！只要正多面体可以画出来，基本上在CSS 3D的领域里，大概就没甚么难得倒我们了。首先看一下百度百科对于正多面体的介绍：多面体，或称...

Kross 2019-08-02 16:14 评论0 收藏0
玩转CSS 3D -正四面体与正六面体

摘要：简单来说，就是非常对称的立方体，而且每一个面都是由正多边形组成，因此在这一篇，将会画出正四面体正六面体。完成之后应该就会顺利地看到一个正六面体，这时候我们可以改变的，可以更加清楚。我们理解了CSS 3D的个中原理之后，废话就不用多说，直接来画正多面体吧！只要正多面体可以画出来，基本上在CSS 3D的领域里，大概就没甚么难得倒我们了。首先看一下百度百科对于正多面体的介绍：多面体，或称...

doodlewind 2019-08-29 18:39 评论0 收藏0
css 3D动画

摘要：无非就是通过轴来进行操作可以帮助理解三维坐标则可以帮你理解透视位置。我们成为基点在水平方向改变观看的位置缩放旋转移动倾斜通过这些来进行效果代码如下正方体代码如下星球持续更新，欢迎大家收藏指教一、今天让我们来学习一下css 3D吧！ 1.首先我们要学习好css3 3d一定要有一定的立体感！ 2.再来那就聊聊原理吧！ 3.css3 3d 顾名思义是由两个2d名片组成的但不是让你建立连个...

Taonce 2019-08-29 16:22 评论0 收藏0