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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- NGUI-学习笔记(2)一个项目需求
using UnityEngine; using System.Collections; public class ins1 : MonoBehaviour { //bool isTarget = f ...
- 内存模型(memory models)和命名空间(namespace)
继续<C++ premier plus > 先来解释一下scope和linkage,所谓scope,是指变量的作用范围,所谓linkage,是指变量能否在不同文件中共享 1,自动变量(au ...
- android 40 Io编程
Io编程:内存卡和sd卡.字符串存入内存卡然后读出来. activity: package com.sxt.day06_06; import java.io.FileInputStream; impo ...
- Qt 学习之路:文件
文件操作是应用程序必不可少的部分.Qt 作为一个通用开发库,提供了跨平台的文件操作能力.从本章开始,我们来了解下 Qt 的文件以及输入输出的功能,也就是 I/O 系统. Qt 通过QIODevice提 ...
- JS 拼凑字符串
和Java一样,JS中直接用"+"号拼凑字符串是很耗费资源的,所以在大量拼凑字符串的情景中,我们也需要一个类似于StringBuffer的工具, 下面利用Array.join()方 ...
- Java基础知识强化之集合框架笔记36:List练习之键盘录入多个数据在控制台输出最大值
1. 键盘录入多个数据,以0结束,要求在控制台输出这多个数据中的最大值 分析: • 创建键盘录入数据对象 • 键盘录入多个数据,我们不知道多少个,所以用集合存储 • 以0结束,这个简单,只要键盘 ...
- 关于SqlServer修改数据库常用信息的方法
--系统表里存放各个数据库属性信息的表之一SELECT name AS [Logical Name], physical_name AS [DB File Path],type_desc AS [Fi ...
- Android清单文件AndroidMenifest.xml
1.AndroidMenifes.xml清单文主要结构件结构 所谓主要结构就是每一个清单文件中都必不可少的结构主要是下面三层 第一层.menifest 第二层.application,use-sdk ...
- LinkedIn第三方登录
官方开发文档网址:https://developer.linkedin.com angularjs LinkedIn初始化 var apiKey='77n7z65hd7azmb';$(function ...
- CentOS 6.5 64位,调整分区大小
调整硬盘分区大小 想增加root空间,减少home空间. 1.查看硬盘使用情况. [root@npm ~]# df -h Filesystem Size Used Avail Use% Mounted ...