前言
最近做的一个烟花动画,就是烟花散开的动画,在动画的实现过程中,主要在烟花旋转过程中卡住了,后来发现主要对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); }
参考
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
复制代码 代码如下: 区别IE6与FF: background:orange;*background:blue; 区别IE...
前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储...
该插件在火狐浏览器中安装。Web Developer 插件强大的功能超乎你的想象,用于CSS...
通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cli) v...
前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一...
网站兼容性调试实在令人烦心,现在的网站设计人员真的要比以前费力很多,因为网...
之前我们简单介绍过 Go-zero 详见《Go-zero:开箱即用的微服务框架》。这次我们...
当解析接口 突然出现一个xml形式的html格式的字符串的时候不用慌张,正常去交给we...
摘要: 下文讲述css中实现鼠标放在指定行上面时,整行变色的方法分享,如下所示: ...
Dreamweaver不小心弄乱了原本的布局格局,一些功能用起来就不顺手了,该怎么充值...