CSS3随笔系列之transform(一)—— transform-origin
transform-origin属性平时似乎用得很少,它决定了变换时依赖的原点。基本的属性特性可以参考CSS手册。
如果在H5动画项目中,用到旋转的话,它还是不能小觑的。
假如我们做一个秋千效果
其实在切图的时候就要注意了,但是乍一眼看过去,不少人可能会误以为是对整个区域图层进行旋转,或许会写成transform-origin:center top;
实际上正确的旋转点的是线的顶端点。
那么如果按这样切图的话,旋转的位置就是目前位置的横坐标像素/该切图元素宽度 27 / 190 =14% ,则应写为transform-origin:14% top;
当然,如果以该图为例的话,我们切图的时候,可以这样切
这样的话,原点就可以直接写为transform-origin:0 0;
值得注意的是,一定需要定义噢,因为默认则是以元素的中心(center center或50% 50%旋转的)。
因为前段时间做H5场景秀的项目比较多,准备整理一点以transform和animate的东东作为分享,也算是自己的一点回顾。
好多年不写blog,希望自己不要又太监……
CSS3随笔系列之transform(一)—— transform-origin的更多相关文章
- 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- 08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...
- 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
- 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...
- 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...
- 05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...
随机推荐
- Can't connect to MySQL server on localhost (10061)解决方法
出现这种错误的原因是由于MySQL的服务被关闭的原因,重新启动一下服务就可以了,启动服务的操作如下: 右键[计算机]-[管理]
- Android 完美退出 App (Exit)
最近两天为了解决Android上面退出程序问题折腾了半死,在google & baidu 上面找了很久.很久出来的完全千篇一律,说的方法有三,但是经过我试验后全部不行. 三个方法分别是: ki ...
- 管理http服务的脚本
因为老是须要又一次安装系统,重一次都要又一次设置http服务的启动脚本.麻烦,所以这一次就把脚本备份出来. httpd for Ubuntu system: nginx + php-fpm #! /b ...
- bitset使用
17.10使用序列1.2.3.5.8.13.21初始化一个bitset,将这些位置置位.对另一个bitset进行默认初始化,并编写一小段程序将其恰当的位置位. #include<iostream ...
- WCF - 学习总目录
WCF - 基础 WCF - 地址 WCF - 绑定 WCF - 绑定后续之自定义绑定 WCF - 契约 WCF - 序列化 WCF - 消息 WCF - 实例与会话 WCF - REST服务
- Java基础知识强化之IO流笔记34:OutputStreamWriter(Writer字符流的子类)5种write数据方式
1. OutputStreamWriter (转换流) OutputStreamWriter 是字符流通向字节流的桥梁:可使用指定的 charset 将要写入流中的字符编码成字节. 同时OutputS ...
- 【Android】随时随地退出程序
新建一个 ActivityCollector 类作为活动管理器,代码如下所示:public class ActivityCollector {public static List<Activit ...
- sqlite 获取数据库中的所有表
SELECT name from sqlite_master where type='table'
- CentOS7上GitLab的使用
生成SSH Keys 生成root账号的ssh key # ssh-keygen -t rsa -C "admin@example.com" 显示pub key的值 # cat ~ ...
- Twisted介绍
Twisted诞生于2000年初,作者为Glyph,目的是为了开发网络游戏. Twisted的历史 Glyph开始采用Java多线程,来开发Twisted Reality,结果多线程使得开发变得复杂, ...