css学习记录第六天(2D,3D)

2D转换

转换(transform)

移动(translate)

2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位
语法:

transform:translate(x,y);或者分开写
transform:translatex(n);
transfrom:translatey(n);

translate不会影响其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
对行内标签没有效果

旋转(rotate)

语法:
transform:rotate(度数)
重点:
rotate里面根度数,单位是deg比如rotate(45deg)
角度为正时,顺时针,负时,为逆时针
默认旋转的中心点是元素的中心

中心点(transform-origin)
设置元素转换的中心点
语法:
transform-origin:x y;
重点:
注意后面的参数x和y用空格隔开
xy默认转换的重点点是元素的中心点(50% 50%)
还可以给x,y设置像素或者方位名词(top,bottom,left,center)

缩放(scale)
语法:
transform:scale(x,y);
注意:
不跟单位
transform:scale(1,1):宽和高大欧放大一倍,相对于没有放大
transform:scale(2,2):宽和高都放大2倍
transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相对于scale(2,2)
transform:scale(0.5,0.5):缩小
scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子。

2D转换总结

  • 转换transform我们简单理解就是变形有2D和3D之分 我们暂且学了三个分别是位移,旋转和缩放

  • 2D移动translate(x,y)最大的优势是不影响其他盒子,里面参数用%,是相对于自身宽度和高度来计算的

  • 可以分开写比如translateX(x),translateY(y) 2D选旋转rotate(度数),可以实现旋转元素,读书的单位是deg

  • 2D缩放sacle(x,y) 里面参数是数字不跟单位 可以是小数 最大的优势 不影响其他盒子

  • 设置转换中心点transform-origin:x y;参数可以百分比,像素或者是方位名词

  • 当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前

css3动画
1,用keyframes定义动画(类似定义选择器)

 @keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}

动画序列

  • 0%是动画的开始,100%是动画的完成,这样的规则就是动画序列

  • 在@keyframes中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果

  • 动画是是元素从一种样式逐渐变化为另一种样式的效果,您可以改变任意多的样式任意多的次数

  • 请用百分比来规定变化发生的时间,或用关键词“from”和“to”,等同于0%和100%

使用动画
animation-name:动画名称;
持续时间
animation-duration:持续时间;
规定动画何时开始
animation-delay:规定动画何时开始,默认是0
规定动画播放次数
animation-iteration-count:规定动画被播放次数,默认是1,还有infinite
规定是否反方向播放
animation-direction:默认是normal,反方向是alternate
规定动画结束之后的状态,
animation-fill-mode:默认是backwards,停留在结束状态是forwards
规定动画暂停
animation-play-state:规定动画是否正在运行或暂停,默认是“running”,还有“pause”。

动画简写属性
animation动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

3D转换
主要知识:
3D位移:translate3D(X,Y,Z)
3D透视:rotate3D(X,Y,Z)
透视:perspective
3D呈现:transfrom-style

透视写在被观察元素的父盒子上面

3D旋转
语法:
transform:rotateX(deg);沿着x轴转动
transform:rotateY(deg);沿着y轴转动
transform:rotateZ(deg);沿着z轴转动
transform:rotate3d(deg);沿着自定义轴旋转deg为角度

3D呈现
控制子元素是否开启三维立体环境
transform-style:flat子元素不开启3d立体空间,默认的
transform-style:preserve-3d;子元素开启立体空间
代码写给父级,但是影响的是子盒子
这个属性很重要,后面必须写

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读