2017/7/26 学习心得 css3第三天
2017-07-27 17:21
127 查看
1、3D转换 transform:
向右是正,向下是正,向前是正,都是以中心点为圆心旋转
rotateX(30deg) 绕着x旋转30deg
rotateY(30deg) 绕着y旋转30deg
rotateZ(30deg) 绕着z旋转30deg
translateX(30px) 沿着x轴移动30px
translatey(30px) 沿着y轴移动30px
translatez(30px) 沿着Z轴移动30px(必须给父盒子加透视)
top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置
translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置
scale(x,y) 2D缩放
倾斜效果:skew(skewX,skewY),横向是y,纵向是x,以盒子中心为原点
所有3D旋转,对着正方向看,都是顺时针
2、透视(近大远小的效果)加给变换的父元素
perspective:1000px;设置的是用户眼睛距离屏幕的距离
透视效果只是视觉上的呈现,并不是真正的3d
backface-visibility:hidden; 让盒子背面隐藏
3、真正的3D效果
transform-style:presever-3d;加到有需要3d的盒子上
4、动画
类似js中的函数,先定义,再调用
定义动画:
@keyframes 动画名{
from{初始状态}
to{结束状态}
}
调用:
animation:动画名称 持续时间 调用次数 是否反向 运动曲线;
多组动画:
@keyframes gun{
0%{ 初始状态 }
25%{ }
75%{ }
100%{ }
}
animation-name:动画名称
animation-duration:持续时间
animation-iteration-count:执行次数 infinite无限次
animation-diretion:动画的方向 normal正常 alternate反向
animation-delay:延迟执行
animation-fill-mode:保持动画结束后的状态:forwards 保持动画开始前的状态:backwards
animation-timing-function:运动曲线 linear ease-in-out ease-in steps(3)分步,分几次完成
5、多列布局
column-count:n; n是几列
column-rule1px dashed red;分割线
column-gap:60px;设置列间距
column-width:200px;列宽度
column-span:all; 设置跨列
向右是正,向下是正,向前是正,都是以中心点为圆心旋转
rotateX(30deg) 绕着x旋转30deg
rotateY(30deg) 绕着y旋转30deg
rotateZ(30deg) 绕着z旋转30deg
translateX(30px) 沿着x轴移动30px
translatey(30px) 沿着y轴移动30px
translatez(30px) 沿着Z轴移动30px(必须给父盒子加透视)
top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置
translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置
scale(x,y) 2D缩放
倾斜效果:skew(skewX,skewY),横向是y,纵向是x,以盒子中心为原点
所有3D旋转,对着正方向看,都是顺时针
2、透视(近大远小的效果)加给变换的父元素
perspective:1000px;设置的是用户眼睛距离屏幕的距离
透视效果只是视觉上的呈现,并不是真正的3d
backface-visibility:hidden; 让盒子背面隐藏
3、真正的3D效果
transform-style:presever-3d;加到有需要3d的盒子上
4、动画
类似js中的函数,先定义,再调用
定义动画:
@keyframes 动画名{
from{初始状态}
to{结束状态}
}
调用:
animation:动画名称 持续时间 调用次数 是否反向 运动曲线;
多组动画:
@keyframes gun{
0%{ 初始状态 }
25%{ }
75%{ }
100%{ }
}
animation-name:动画名称
animation-duration:持续时间
animation-iteration-count:执行次数 infinite无限次
animation-diretion:动画的方向 normal正常 alternate反向
animation-delay:延迟执行
animation-fill-mode:保持动画结束后的状态:forwards 保持动画开始前的状态:backwards
animation-timing-function:运动曲线 linear ease-in-out ease-in steps(3)分步,分几次完成
5、多列布局
column-count:n; n是几列
column-rule1px dashed red;分割线
column-gap:60px;设置列间距
column-width:200px;列宽度
column-span:all; 设置跨列
相关文章推荐
- 2017/7/24 学习心得 css3第二天
- 2017/7/23 学习心得 css3
- 南昌大学软件学院21天大神养成计划_第三天学习心得体会
- MFC学习第三天心得(GetMessage底层处理)—winapi篇
- Vue学习第三天 Vue过渡效果增加之CSS3 2D 转换
- 2017/7/22 学习心得 css3
- 学习H5+CSS3+JS的一些心得体会
- css3学习心得
- css3学习心得分享
- html5,css3 学习心得
- ORACLE 学习心得 第三天 反射
- CSS3学习内容与心得
- 2017/7/27 学习心得 css3第四天
- HTML5与CSS3学习心得
- 一网打尽h5与css3,学习经验心得
- CSS3 HTML5学习心得
- Mysql数据库学习心得(3)
- jquery【学习心得】选择器的注意点
- LeetCode编程练习 - Missing Number学习心得 4000
- 正则表达式的学习心得