2D转换-transform

转换(transform),实现元素的位移,旋转,缩放等特效

移动translate

语法

transform: translate(xpx,ypx);
transform: translateX(npx);
transform: translateY(npx);

单位

px %

移动自身宽度和高度的*的百分比

用处

子盒子在父盒子中垂直水平居中

盒子移动

定位
盒子外边距
移动

重点注意

定义2D转换中的移,沿着X轴和Y轴移动元素
translate的最大优点是不会影响其他元素的位置
translate中的百分比单位是先对于自身原来的translate:()
对行内标签没有效果

旋转rotate

让元素在二维平面内顺时针或者逆时针旋转

语法: transform:rotate(度数deg)

重点注意

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

缩放scale

transform:sacle(x,y);

x和y用都逗号隔开

transform:scale(2,2);
	 数字就是几倍
transform:scale(2,1);
transform:scale(2);
	等比例放大两倍
transform:scale(0.5, 0.5)
	缩小一半
transform:scale(0.5)

优势

不影响其他盒子,而且可以设置缩放的中心点

自定义旋转中心

transform-origin:x y;

像素值参考以盒子左上角为原点

注意

注意后面的参数x和y用空格隔开

x y默认转换的中心点时元素的中心点(50% 50%)

还可以给x y设置像素或者方位名词(top bottom left right center)

例如:

左下角
transform-origin: left bottom;

网页中的二维坐标系

x轴垂直向右
Y轴垂直向下

2D转换的综合写法

同时使用多个转换,其格式为:transform: translate() rotate() scale()...等
其顺序会影响转换效果
先旋转会改变坐标轴位置
当我们有位移和其他属性的时候,记得将位移放到最前面

CSS3 动画

制作动画步骤

先定义动画

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

再调用动画

div {
/*....*/
animation-name:动画名称;
animation-duration:持续时间;
}

用@keyframes定义动画(类似定义选择器): keyframes 关键帧动画

动画序列

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

里面的%百分比要是整数
里面的百分比就是总的时间的划分

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

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

一个元素可以添加多个动画,逗号隔开

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

动画常用属性

属性	说明	值/可选值
animation-duration: 10s;	s	ms
animation-timing-function: ease;	速度曲线-默认是ease	速度曲线细节- linear 匀速播放 ease 低速-加快-变慢 ease-in 低速开始 ease-out 低速结束 ease-in-out 低速开始和结束 steps() 指定时间函数中的间隔数量(步长) 分次数完成动画的展示
animation-delay: 1s;	等待1s才开始
animation-iteration-count: infinite/1;	重复1次-默认	重复无数次
animation-direction: alternate;	向左: normal	反过来播放:alternate
animation-name: 动画名称 ;	动画名称
animation-fill-mode: backwards;	动画结束后默认闪回到起点	forwards:动画结束后停在结束的位置
`div:hover { animation-play-state: paused; }	动画播放状态: 鼠标放上去动画终止	默认running

动画简写

animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画其实或者结束的次数

animation: myfirst 5s linear 2s infinite alternate

前面两个属性一定要写

注意

简写属性里面不包含animation-play-state
暂停动画:animation-play-state:paused;经常跟鼠标经过等其他配合使用
想要动画走回来,而不是直接跳回去:animation-direction:alternate
盒子动画结束后,在结束的位置:animation-fill-mode:forwards

CSS3 3D转换

3D特点

近大远小
物体后面遮挡不可见

网页中的三维坐标系

x轴:水平向右正值
y轴:垂直向下正值
z轴垂直屏幕靠近我们是正值,远离我们是负值

3D位移:translate3d(x,y,z)

transform:translateX(100px):在x轴上移动

transform:translateY(100px):在y轴上移动

transform:translateZ(100px):在z轴上移动一般单位都是px

transform:translate3d(x,y,z); xyz不能省略没有就写0

透视:perspective

在2D平面产生近大远小视觉立体,但是只是效果二位的

如果想在网页产生3D效果需要透视(理解成3D物体投影在2D平面内.)
模拟人的视距,可以认为安排一直眼睛去看
透视我们也称为视距: 视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大, 越远成像越小
透视的单位是像素px

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

d:就是视距,视距就是一个距离人的眼睛到屏幕的距离
固定透距离为perspective:500px;, z轴值越大, 物体越大, z轴值越小,看到的物体越小
z:就是z轴,物体距离屏幕距离,z轴越大(正值)我们看到的物体就越大.

3D旋转:rotate3d(x,y,z)

3d旋转就是可以让元素在三维平面内沿着x轴,y轴,z轴或者自定义轴旋转

语法

transform: rotateX(45deg);沿着x轴正方向旋转45度
左手准则拇指指向x轴正方向正值顶部向后旋转
transform: rotateY(45deg); 沿着y轴正方向旋转45度
左手准则拇指指向y轴正方向正值: 右边向后旋转
transform: rotateZ(45deg); 沿着z轴正方向旋转45度
左手准则拇指指向z轴正方向正值: 顺时针旋转
transform: rotate3d(x,y,z,deg);沿着自定义轴旋转(了解即可)
transform: rotate3d(1,1,z,45deg); 沿着对角线旋转45deg

3D呈现transform-style

控制子元素是否开启三维立体环境

transform-style:flat 子元素不开启3d立体空间默认的

transform-style:preserve-3d; 子元素开启立体空间

代码写给父级,但是影响子盒子这个属性很重要,后面必用

案例:两面翻转的盒子

box指定大小,切记要添加3d呈现
back值要沿着y轴翻转180度
最后鼠标经过box沿着Y轴圆转180deg

CSS2+3-高级-(2)