北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京web前端培训 [css3]transform的动画效果

时间: 来源:火星人

CSS变形transform是一些效果的集合,主要是移动、旋转、缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果。变形transform可以实现2D和3D两种效果。本文将详细介绍变形transform2d的相关知识。


①旋转--->rotate(参数a),单位deg,表示旋转角度,正数顺时针,负数逆时针。
rotate旋转函数可以让元素通过指定的角度(deg)根据变形原点进行顺时针旋转,默认为0deg。与skew不同的是,rotate不会改变元素的形状。涉及到旋转的2d函数只有一个,就是rotate()

②缩放--->scale(参数a),单位1,也就是“没有单位”,赤裸裸的0-1之间的数字就行,表示为缩放比例。
scale缩放函数可以让元素根据变形原点进行缩放,默认缩放值为1。涉及缩放的2d函数共3种,分别是scale()、scaleX()、scaleY()
x表示元素在x轴方向上的缩放比例;y表示元素在y轴方向上的缩放比例

③倾斜--->skew(参数a,参数b),单位deg,两个参数分别表示x,y方向上的倾斜角度,正数顺时针,负数逆时针。 skew倾斜函数可以让元素以其变形原点围绕x轴和y轴进行一定角度的倾斜。涉及倾斜的2d函数共3种,分别是skew()、skewX()、skewY()
x表示y轴向x轴倾斜的角度,y表示x轴向y轴倾斜的角度

④位移--->translate(参数a),单位px,移动方向是在div这个平面方向上(这样说起来,应该有点难理解,放在四维坐标中,把div看做是任意一个平面来理解),也有正数之分,正向前,负向后。

translate位移函数可以使元素从原来的位置上移动指定的位移。涉及位移的2d函数共3种,分别是translate()、translateX()、translateY()

x表示元素在x轴方向上的位移;y表示元素在y轴方向上的位移

位移函数还可以接受百分比。其中x%相对于元素水平方向的宽度和,y%相对于元素垂直方向的高度和


transform变形可以接受多值,出现多个变形函数时用空格分隔,并且按照从前往后的顺序执行。


另外还有一些前置属性:


transform-origin:

用于指定元素变形的中心点。默认中心点就是元素的正中心,即XYZ轴的50% 50% 0处。可以通过该属性改变元素在XYZ轴的中心点,正值表示正向位移,负值表示负向位移。


transform-style:

这个属性比较简单只有两个值flat和preserve-3d。用于指定舞台为2D或3D,默认值flat表示2D舞台,所有子元素2D层面展现。preserve-3d看名字就知道了表示3D舞台,所有子元素在3D层面展现。注意,在变形元素自身上指定该属性是没有用的,它用于指定舞台,所以要在变形元素的父元素上设置该属性。


backface-visibility

用于是否可以看见3D舞台背面,默认值visible表示背面可见,可以设成hidden让背面不可见。

关键词:北京web前端培训,北京web前端,web前端,北京H5培训,北京HTML5培训,北京前端开发

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号