CSS3中的2D变形
来源:互联网 发布:求职网站 知乎 编辑:程序博客网 时间:2024/05/18 22:50
2D变形
CSS3所提供的动画功能主要包括变形、转换和动画技术。变形是最基本的动画形式,它主要通过CSS控制元素样式属性值的变化来实现。利用transform功能来实现文字或图像的旋转、缩放、倾斜和移动这4种类型的变形处理。
transform实现了一些可用SVG实现的变形功能,transform属性的基本语法如下所示:
transform:none|<transform-function>[<transform-function>];
transform-function设置变形函数:matrix()、scale()、translate()、totate()、skew()。
rotate(<angle>)函数用法
scale()函数能够缩放元素大小,语法格式:scale(<number>);number参数值可以是正数、负数和小数。
translate()函数能够重新定位元素的坐标,语法格式如下:translate(<translation-value>);
skew()函数能够让元素倾斜显示,会改变元素的形状,语法格式如下:skew(<angle>);
matrix()是矩阵函数,调用该函数可以非常灵活地实现各种变形效果。语法格式如下:
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
CSS变形的原点默认为对象的中心点,如果要改变这个中心点,可以使用transform-origin属性进行定义。transform-origin属性的初始值为“50% 50%”,适用于块状元素和內联元素,transform-origin接受两个参数,可以是百分比、em、px等具体的值,也可以是left、center、right,或者top、middle、bottom等描述性关键字。
CSStransformation和CSS transition是两种不同的动画模型。
transition属性是一个复合属性,可以同时定义transition-property、transitionduration、transition-timing-function、transition-delay、transition-property、transition-duration、transition-timing-function和transition-delay子属性值。
transition-property属性用来定义转换动画的CSS属性名称。
transition-duration属性用来定义转换动画的时间长度,即设置从旧属性换到新属性花费的时间,单位为秒。
transition-delay属性用来定义过渡动画的延迟时间。
transition-timing-function属性用来定义过渡动画的效果,初始值为ease。
- ease:缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,即立方贝塞尔。
- linear:线性效果,等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。
- ease-in:渐显效果,等同于cubic-bezier(0.42,0,1.0,1.0)函数。
- ease-out:渐隐效果,等同于cubic-bezier(0,0,0.58,1.0)函数。
- ease-in-out:渐显渐隐效果,等同于cubic-bezier(0.42,0,0.58,1.0)函数。
- cubic-bezier:特殊的立方贝塞尔曲线效果。
animation属性是一个复合属性,它包含了animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction子属性值。
animation-name属性可以定义CSS动画的名称,初始值为none。
animation-duration属性定义CSS动画的播放时间,初始值为0。
animation-timing-function属性定义CSS动画的播放方式,初始值为ease。
animation-delay属性可以定义CSS动画延迟播放时间,初始值为0。
animation-iteration-count属性定义CSS动画的播放次数,初始值为1,infinite表示无限次。
animation-direction属性定义CSS动画的播放方向,初始值为normal,另一个值为alternate。
- CSS3中的2D变形
- CSS3变形之2D变形
- CSS3之2D变形
- CSS3 过渡、2D变形、3D变形 20160527
- CSS3 过渡 2D变形 3D变形
- Html5 css3学习--2D变形
- CSS3 3D变形
- CSS3中的变形与动画(上)【2D】 Transform 和 Transition
- CSS3变形之3D变形
- CSS3中的transform变形
- CSS3中的transform变形
- CSS3中的transform变形
- CSS3中的变形处理
- CSS3中的变形
- 最实用的常用css3知识点梳理二:过渡+2d变形+3d变形
- transform属性——css3变形效果2D
- CSS3 中的 2D 变换
- CSS3中的transform变形详解
- java开发之路书单
- leetcode第一题
- "=="和equals和equalsIgnoreCase三者的区别
- [NOIP2004]合并果子 T2 数据结构 简单贪心
- c++之动态库和静态库的区别
- CSS3中的2D变形
- oracle distinct多字段去重
- 理解Flex的事件机制
- 自动释放内存!Facebook推出强大Android图片库Fresco
- iOS之为什么Cocoa的常量命名都以小写 k 开头?
- 简单javaXML读取——DOM、SAX
- Xutils框架简介
- 系统跳转
- Spring 对AOP的实现