一、2D转换

概念：就是元素在2D平面上实现移动，旋转，缩放，斜切的操作就称之为2D转换

值：移动，旋转，缩放，斜切

（1.1）移动

参数说明：

（1）只有一个值的情况下，表示水平方向运动，正值向右，负值向左，也可以接受百分比，百分比参照的是自身的宽，高

（2）两个值分别控制水平和垂直

（3）移动不会影响其他的元素，类似于相对定位

（4）我们可以通过盒子的绝对定位配合transform：translate（-50%，-50%）实现一个没有宽度高度的盒子水平垂直居中，如果没有宽度，盒子最大的宽自能达到父盒子的一半。

（5）如果想要单个的方向移动 可以写成 translateX（）和translateY（）

（1.2）旋转

参数说明：

（1）单位是deg  角度

（2）整体发生旋转（包括里面的内容）

（3）正值顺时针，负值逆时针

（4）中心点可以控制

（1.3）控制中心点

值说明：

（1）值可以是方位名词，可以是像素，也可以是百分比（参照的是自身的宽高）

（1.4）缩放

参数说明：

（1）没有单位，接受数值和小数

（2）只有一个值的情况，整体缩放（等比例）

（3）两个值的情况，宽度和高度分别缩放（可能会变形）

（4）边框也是会缩放的，并且如果想要一个方向缩放，另外一个方向需要写一个1

（5）缩放的中心点也可以被控制

（6）如果想要控制单一的方向，可以使用scaleX和scaleY去控制

（1.5）斜切 （S Q奥）

参数说明：

（1）单位是deg

（2）只有一个值的情况下，水平斜切

（3）两个值的情况下，水平垂直分别斜切

（4）斜切的中心点也可以被控制 如果是X轴斜切 中心点控制上下 如果是Y轴斜切 中心点控制左右

总结：

（1）移动，斜切，放大都是可以通过X或者Y去控制某一个方向

（2）中心点可以控制旋转，缩放，斜切

（3）如果我们想要多个2D效果共存，需要采用连写的方式

 

（4）当在不同场景出现需要transfrom的时候，需要复制前面已经存在的，防止覆盖，并用连写的方式集合到一条transform上

（5）Transform的转换效果顺序尽量保持统一，如果不统一会出现一些问题

 

 

二、过渡

首先声明，过渡不是动画，是由css的一种状态到另外一种状态中间变换的过程，我们称之为过渡

值说明：

（1）那个属性需要过渡就写什么属性 可以用all来代替全部 （必写）

（2）过渡持续的时间，单位可以s或者是ms （必写）
（3）过渡的曲线 默认：ease

（4）过渡从何时开始

 

 

 

注：

css3定义动画新策略：css3的底层是c++，而JQ的animate是用定时器来完成的，所以说css3的运行效率会比animate高出很多，所以但凡是一些不是功能性的动画，不需要保证兼容的时候，一律推荐大家用css3去实现，移动端的动画都用过渡去实现（因为手机的硬件相对电脑来说性能差，所以用c3实现 效率更高）

小细节：display和渐变是不能直接产生过渡的 ...

：过渡的属性最好写全 

三、3D转换

 

（3.1）rotateX

让元素围绕着X轴进行旋转

（1）正值表示推到，负值表示鞠躬

（2）没有透视的3D是看不出来的

 

 

 

四、盒子居中的其他方法

 

 

五、向下小箭头的

 5.1 CSS3方法制作

 

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有