CSS动画:Transform中使用频繁的scale,rotate,translate动画
动画中,skew只是transform中的一种形式的动画,我们还可以学习scale,rotate,translate.这是目前使用比较频繁的属性动作.
1.scale动画的定义:(单位数值)
scale动画,是将对象进行伸缩操作.scale有两个属性,第一个是宽(X)的伸缩,第二个是高(Y)的伸缩,数值是以倍数的方式变化.他也可以分开定义scaleX,scaleY;根据自己的需要设定.
CSS代码案例:
- .scale{
width: 100px;
height: 100px;- /*transform:scale(3,2); !*第一个参数是横向缩放,第二个蚕食纵向缩放*!*/
/*也可以分开写*/
transform: scaleX(1) scaleY(3);
}
2.rotate动画的定义:(单位deg)
rotate动画,是将对象进行旋转操作,是按顺时针方式旋转.他还可以有rotateX,rotateY,rotateZ的方式旋转.大家可以用代码试试其中的效果.下面用了四种方式的效果
CSS代码案例:
- .rotate,.rotate2,.rotate3,.rotate4{
width:200px;
height: 100px;- margin:10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;;
}
.rotate{
transform:rotate(10deg)
}
.rotate2{
transform:rotateX(-180deg)
}- .rotate3{
transform: rotateY(180deg);
}- .rotate4{
transform: rotateZ(180deg);
}
3.translate动画定义: 单位(像素)
translate是将对象在区域上进行移动.他有两个属性,translate(x,y),以坐标的方式存在.也就是可以有 左/右/上/下 方式的移动.按照值的正负数来决定位置.他也可以分开定义translateX(x),translateY(y);
CSS代码案例:
- .translate{
width:200px;
height: 100px;- margin:10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;;
}
.translate{
transform: translate(-30px,100px);
}
4.矩阵方式的定义:
matrix这个属性称为矩阵,其实他一种排列方式.这个属性是transform动画属性的合并写法,但是也是难理解的方式.比如:
CSS代码案例:
- transform: translateX(12px) translateY(20px)
- transform: matrix(1,0,0,1,12,20)
代码中是效果是一样的,他们是等同的.当然还可以有更多的动画属性一起定义.
注意:图片中的效果,只代表是属性的效果.代码中的效果可以自己复制到代码编辑器中,执行看效果.
本文属于吴统威的博客,微信公众号:bianchengderen 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=155 ,欢迎大家传播与分享.
CSS动画:Transform中使用频繁的scale,rotate,translate动画的更多相关文章
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
- 理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
- css3 transform中的matrix矩阵
CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
- css010 css的transform transition和animation
css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1. Transform Transform(变形) r ...
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- HDOJ/HDU 1250 Hat's Fibonacci(大数~斐波拉契)
Problem Description A Fibonacci sequence is calculated by adding the previous two members the sequen ...
- MacOS下的生活——RescueTime,时间规划利器
前段时间Yxj同学给我推荐了一款可以记录电脑及手机使用时间分类的软件,据说Mac平台下也支持,当时就有了兴趣,但是好像因为什么事给耽搁了,知道今天下午看到Yxj在看这个软件记录的自己的时间表,才觉得这 ...
- 正则表达式的先行断言(lookahead)和后行断言(lookbehind)
正则表达式的先行断言和后行断言一共有4种形式: (?=pattern) 零宽正向先行断言(zero-width positive lookahead assertion) (?!pattern) 零宽 ...
- Java Struts2 的请求处理流程详解
一.Struts2的处理流程: 客户端产生一个HttpServletRequest的请求,该请求被提交到一系列的标准过滤器(Filter)组建链中(如ActionContextCleanUp:它主要是 ...
- 普通Java程序员学习使用的6个JDK内建工具
与你的问题不同,我认为软件工程主要是用来解决问题的.有些博客认为“每个小孩都应该学习编程”,“你认为学数学只是玩玩而已?如果你有看过我的HTML5调试器的话,你会发现我是一个程序员,但我做的工作远不止 ...
- Cocos2d-x CCActionInterval
第一部分:CCActionInterval家族(持续动作) 持续动作,顾名思义,就是该动作的执行将持续一段时间.因此持续动作的静态生成函数,往往附带一个时间值Duration.例如: CCAction ...
- php中传值与传引用的区别。什么时候传值什么时候传引用?
值传递: 函数范围内对值的任何改变在函数外部都会被忽略; 引用传递: 函数范围内对值的任何改变在函数外部也能反映出这些修改: 优缺点:按值传递时,php必须复制值.特别是对于大型的字符串和对象来说 ...
- delphi 保存 和 打开 TREE VIEW的节点已经展开的状态
保存 和 打开 TREE VIEW的节点已经展开的状态 如果每次打开后能自动读取上次展开的状态就会非常快捷 下载地址: 实现方法 将已经展开的节点索引 放在一个文本中最后选中的那个节点索引放在最后一位 ...
- 数据库中存储日期的字段类型究竟应该用varchar还是datetime ?
背景: 前段时间在百度经验看到一篇文章<如何在电脑右下角显示你(爱人)的名字>,之前也听过这个小技巧,但没真正动手设置过.所以出于好奇就实践了一下. 设置完成后的效果例如以下.右下角的时间 ...
- ||和 && 符号的赋值运用(转)
javascript “||”.“&&”的灵活运用 博客分类: Jquery javascript javascript中运用“||”.“&&”javascript 真 ...