css3之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-origin的更多相关文章
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- 实用CSS3的transform实现多种动画效果
查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...
- 用CSS3的transform来做一个立方体
有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效 ...
- HTML5之CSS3 3D transform 剖析式学习之一
最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...
- 好吧,CSS3 3D transform变换,不过如此!
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- css3 变形(transform)、转换(transition)和动画(animation)
http://www.w3cplus.com/content/css3-transform/ 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...
- CSS3 2D Transform
在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...
- CSS3 3D Transform
CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...
- css3之transform的应用
一.利用transform实现图片额外显示 效果图如下 初始状态:
- CSS3形变——transform与transform-origin画时钟
css3属性transform和transform-origin"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...
随机推荐
- ORA-01146: cannot start online backup - file 1 is already in backup ORA-01110: data file 1: 'C:\ORACLE\ORADATA\ORCL8\SYSTEM01.DBF'
问题: Error: [1146] ORA-01146: cannot start online backup - file 1 is already in backup ORA-01110: dat ...
- 第十章 Secret & Configmap (中)
10.3 在Pod中使用Secret 10.3.1 Volume方式 apiVersion: v1 kind: Pod metaata: name: mypod spec: containers: - ...
- ThinkPHP 配置详解
3.0 ThinkPHP配置详解 3.1 入口文件的配置 一般不建议在入口文件做过多的配置,但可以重新定义一些系统常量,以下简单介绍几个常用的系统常量. 1.APP_PATH 默认情况下,框架的项 ...
- OSPF理论介绍
OSPF协议Open Shortest Path First是链路状态协议.RIP和EIGRP是距离矢量协议只知道邻居,但链路状态可知道全网信息,因此天然免疫环路.距离矢量协议和链路状态协议最大的区别 ...
- [OpenCV Qt教程] 如何在内存中压缩图像
本文译自:http://www.robot-home.it/blog/en/software/tutorial-opencv-qt-comprimere-un-immagine-in-memoria/ ...
- sql之将一个表中的数据注入另一个表中
sql之将一个表中的数据注入另一个表中 需求:现有两张表t1,t2,现需要将t2的数据通过XZQHBM相同对应放入t1表中 t1: t2: 思路:left join 语句: select * from ...
- 跟着太白老师学python day11 可迭代对象和迭代器
如果对象的属性中有__iter__属性就说明是可迭代的,容器类的数据类型都是可迭代对象 如果对象的属性中既有__iter__属性也有__next__属性,就说明这个对象是迭代器 如何判断一个函数是不是 ...
- 5.MPEG-4 压缩编码标准
1.MPEG-4标准概述 与MPEG1和MPEG2标准相比,MPEG-4 更加注重多媒体系统的交互性和灵活性,主要应用于可视电话.视频会议等. MPEG-4 标准主要包含音视频对象编码工具集和编码对象 ...
- Python 调用阿里云 API 收集 ECS 数据
#!/usr/bin/env python # coding: utf-8 # author: Wang XiaoQiang ''' 功能介绍: 1.调用阿里云API,收集所有区域 ECS 信息 2. ...
- Zabbix Agent 自动、主动注册
简述: 今天来研究一下 Zabbix 的主动注册功能. 当你有十台机器需要监控时,你手动去添加是没有问题的.但是当你有五十台.上百台或更多服务器要监控时,你会怎么做 ? Active Agent Au ...