IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > HTML5/前端互联网工程师 > css3基础入门-转化、过度、动画的介绍(九)

css3基础入门-转化、过度、动画的介绍(九)

时间:2017-01-23 10:01来源:原创 作者:恪己 点击:
一、转换 1、转换的简介 (1)、什么是转换 改变元素在网页中的位置,大小,角度,形状的一种特殊效果 元素可以实现2D转换以及3D转换 2D:使元素在x轴和y轴上进行变化 3D:在2D基础
一、转换
1、转换的简介
(1)、什么是转换
改变元素在网页中的位置,大小,角度,形状的一种特殊效果 
元素可以实现2D转换以及3D转换
2D:使元素在x轴和y轴上进行变化
3D:在2D基础上,增加一个 z轴上的变化
(2)、转换属性
属性:transform
取值:
1)、none
2)、transform-functions
表示一个或者多个"转换函数",多函数间,用空格分开 
ex:
transform:移动函数 形状函数;
(3)、转换的原点
默认的转换原点:元素的中心点位置处,即x轴的50%,y轴的50%
属性:transform-origin
取值:
1)、取两个值
表示 x轴 和 y轴的位置
transform-origin:0px 0px;
transform-origin:0% 50%;
transform-origin:center center;
2)、取三个值
表示 x轴,y轴和z轴的位置
2、转换-2D转换
(1)、2D位移
1)、什么是位移
改变元素在页面上的位置
2)、属性 和 函数
属性:transform
函数:
translate(x)
改变元素在x轴上的位置
x取值为正,向右移动
x取值为负,向左移动
translate(x,y)
改变元素在x和y轴上的位置
y取值为正,向下移动
y取值为负,向上移动
单向位移函数:
translateX(x) --> translate(x)
translateY(y) --> translate(0,y) 
取值:
1、数值
2、百分比
(2)、2D缩放
1)、什么是缩放
改变元素的大小尺寸
2)、属性 和 函数
属性:transform
函数:
scale(value) --x轴 和 y轴 等比例缩放
scale(x,y)
取值:
默认值 :1
缩小:0-1之间的小数
放大:大于1的数值
单向缩放函数:
scaleX(x)
scaleY(y)
(3)、2D旋转
1)、什么是旋转
改变元素的 角度
2)、属性 和 函数
属性:transform
函数:rotate(ndeg)
n :
取值为正 , 顺时针旋转
取值为负 , 逆时针旋转
注意:
*元素旋转时,坐标轴也跟着转 ,可能会影响后续的位移操作
*转换原点会影响最终的转换效果
(4)、2D倾斜
1)、什么是倾斜
改变元素形状的一种方式
2)、属性 和 函数
*属性
transform
*函数
skew(x)
skew(x,y)
单向倾斜:
skewX(x)
沿x轴的倾斜,实际上是改变y轴的倾斜角度(逆时针)
skewY(y)
沿y轴的倾斜,实际上是改变x轴的倾斜角度(顺时针)
3、转换-3D转换
(1)、2D与3D的不同
空间距离
(2)、属性 :perspective
假定人眼 到 投射平面的距离
浏览器兼容性:
Chrome&Safari :-webkit-perspective
注意:
该属性要加在 3d 转换元素的父元素上。
(3)、3D转换-旋转
元素在 x轴,y轴,z轴分别做旋转操作
属性 和 函数
属性:transform
函数:
rotateX(xdeg)
以x轴为中心轴,旋转元素
rotateY(ydeg)
rotateZ(zdeg)
(4)、3D转换-位移
改变元素在 z 轴上的位置
属性和函数
属性:transform
函数:translatez(z)
有三个元素,默认位置相同
第一个元素 z轴 -50px的位置处
第二个元素 z轴 原点
第三个元素 z轴 50px的位置处
(5)、3D位移-特殊属性
属性:transform-style
作用:规定如何在3D空间中呈现被嵌套的元素
取值:
*flat
子元素将不保留其3D位置
*preserve-3d
子元素将保留其3D位置
二、过渡
1、什么是过渡
使得CSS属性值在一段时间内平滑的过渡
过渡 主要 关注的 是变化过程
2、过渡的四大属性
(1)、指定过渡属性
属性:transition-property
作用:指定 哪个属性的 值在变化过程中使用过渡效果进行显示
取值:
1)、none
2)、all
所有属性都采用过渡效果展示
3)、property
具体 使用过渡效果的属性名称
可以设置过渡效果的属性:
1)、颜色属性
2)、取值为数值的属性
3)、转换属性
transform
4)、渐变属性
5)、visibility
6)、阴影属性
ex:
1)、transition-property:width;
2)、transition-property:transform;
3)、transition-property:rotatex;//错误
(2)、指定过渡时长
作用:一个过渡效果在多长时间内完成
属性:transition-duration

     

------分隔线----------------------------
栏目列表
推荐内容