css可以用transform实现拖拽吗（CSS动态属性的开始）
css可以用transform实现拖拽吗（CSS动态属性的开始）常用属性主要有：Transform-origin（基准点），基于哪一个点来做变换，Transform-style（元素呈现方式2D还是3D），Rotate（旋转-度数），Scale（缩放-大小），skew（倾斜-左右），Translate（移动-x/y轴），Perspective（透视）。CSS变换都是基于左手坐标系和透视投影。与之对应的：正交投影正交投影的投影线垂直于投影平面，里面的光线是互相平行的；比如生活中的太阳发出的光都是平行光。CSS的坐标系统：它的坐标系是一个左手坐标系，绿色的是x轴的方向也就是屏幕的方向，向右正方向；红色的是y轴，向下是正方向；蓝色是z轴，屏幕向外是正方向。（如下图所示）
1、基本概念基本概念：transform 属性向元素应用 2D 或 3D 转换；该属性允许我们对元素进行旋转、缩放、移动或倾斜。
这两点是Transform的概念和应用场景，重点在于2D和3D的转换，那么呢？2D和3D的转换是有一定的数学基础的，为什么这么说呢？我们需要了解两个概念
第一个：透视投影
从某一点发射出去的光线，是互不平行的，然后就会有一个近大远小的效果。比如：家里的灯泡，我们把一个东西离得灯泡越近，那么它的影子就越大，离得越远，影子就越小。
与之对应的：正交投影
正交投影的投影线垂直于投影平面，里面的光线是互相平行的；比如生活中的太阳发出的光都是平行光。
CSS的坐标系统：它的坐标系是一个左手坐标系，绿色的是x轴的方向也就是屏幕的方向，向右正方向；红色的是y轴，向下是正方向；蓝色是z轴，屏幕向外是正方向。（如下图所示）
CSS变换都是基于左手坐标系和透视投影。
常用属性主要有：Transform-origin（基准点），基于哪一个点来做变换，Transform-style（元素呈现方式2D还是3D），Rotate（旋转-度数），Scale（缩放-大小），skew（倾斜-左右），Translate（移动-x/y轴），Perspective（透视）。
2、浏览器的兼容- 完全支持Transform第一个浏览器版本
- 完全支持Transform-origin第一个浏览器版本
- 完全支持Transform-style第一个浏览器版本
- rotate(angle)，2D旋转
transform: rotate(45deg);
- rotateX(angle)，沿X轴3D旋转
transform: rotate(45deg);
- rotateY(angle) ， 沿 Y 轴3D旋转
transform: rotate(45deg);
- rotateZ(angle) ， 沿 Z 轴3D旋转
transform: rotate(45deg);
- rotate3d(x y z angle) ， 3D旋转；接收四个参数，x y z 介于0-1之间，确定三维空间唯一坐标点，angle围绕原点与x y z 坐标点连线的旋转角度。
- 元素围绕着xyz在空间中确定的唯一坐标点和原点之间的连线旋转指定的角度，这就是rotate3D。
transform: rotate3d(1 1 1 45deg); 4、Scale（缩放，同样分为2D缩放和3D缩放）
- scale(x[ y]) ，2D 缩放
transform: scale(2);
- scaleX(x) ， 沿 X 轴缩放
transform: scaleX(2);
- scaleY(y) ， 沿 Y 轴缩放
transform: scaleY(2);
- scaleZ(z) ， 沿 Z 轴缩放 - 单独使用时没有任何效果
transform: scaleZ(2);
- scale3d(x y z) ， 定义每个方向上的缩放 ， Z方向单独使用时没有任何效果
transform: scale(2 2 2); 5、Skew（倾斜）
- skewX(angle) - 沿 X 轴的 2D 倾斜
transform: skewX(45deg);
- skewY(angle) - 沿 Y 轴的 2D 倾斜
transform: skewY(45deg);
- skew(angle-x angle-y) - 沿 X Y 轴的 2D 倾斜
transform: skewY(45deg 45deg); 6、Translate（移动）
- translateX(x) ， 沿 X 轴位移
transform: translateX(20px);
- translateY(y) ， 沿 Y 轴位移
transform: translateY(20px);
- translateZ(z) ， 沿 Z 轴位移，需要配合perspective属性一起使用
transform: translateZ(20px);
- translate(x y) ， 沿 X Y 轴位移
transform: translate(20px 20px);
- translate3d(x y z) ， 沿 X Y Z 轴位移
transform: translate(20px 20px 20px); 7、Perspective，定义的是视觉和元素在3D空间Z平面之间的距离
transform: perspective(200px); 8、Transform-origin（基准点）
在前面的例子里，旋转和倾斜都是基于中心位置，也就是基准点的默认值：50% 50% 0；Transform-origin接收三个参数，x-axis y-axis z-axis；
在x的方向上可以指定：left、center、right、length和%；在y轴的方向上可以指定：top、center、bottom、length和%；在y轴的方向上只可以指定：length。
transform-origin: x-axis y-axis z-axis; 9、Transform-style（三维空间的展现形式）
主要有两个值：float - 2D形式和preserve-3d - 3D形式。
本篇文章主要分享了Transform的基本概念，简要介绍了CSS3坐标系统与透视原理 重点介绍了Transform常用的Rotate(旋转)、Scale(缩放)、Skew(倾斜)、Translate(移动)、Perspective(透视)属性。
