3D效果
给需要做3D动画的元素的父元素开启3D效果
transform-style:preserve-sd;
设置距离值：舞台深度
perspective:2000px;
设置舞台中心点(基准点的位置)
默认父元素的中心
perspective-origin:100px 0;
无论是开启3D模式，还是设置舞台深度，还是设置基准点，都是设置给父级元素的
只有设置元素背面不可见，是设置给元素自身的
backface-visibility:hidden;
CSS3 transform都有哪些常用属性
transform的属性包括：
rotate() / skew() / scale() / translate()，分别还有x、y之分，比如：rotatex()和rotatey()，以此类推。
transform:rotate()：
含义：旋转；其中
deg是“度”的意思，如10deg表示10度下同。
/*transform: rotateY(45deg);*/
/*transform: rotateZ(45deg);*/
/*transform: rotate(45deg, 45deg, 45deg);*/
/*transform: rotate3d(1, 0, 0, 60deg);*/```
>`transform:skew()`：
含义：倾斜；
#####tansform:scale()：
>含义：比例；`1.5`表示`以1.5的比例放大`，如果要放大2倍，须写成`2.0`，缩小则为负`-`。
```/*transform: scaleX(1.5);*/
/*transform: scaleY(1.5);*/
/*transform: scaleZ(1.5); 厚度变大：无效*/
/*transform: scale(1.5, 0.5);*/
/*transform: scale3d(1.5, 0.5, 1);*/```
#####transform:translate()：
>含义：`变动，位移`；如下表示`向右位移120像素`，如果向上位移，把后面的`0`改个值就行，向左向下位移则为负`-`。
```/*transform: translate(100px, 100px);*/
/*transform: translate3d(100px, 100px, 1000px);*/```
#元素拖动
> 在网页中，`链接、文字、图片`都可以被拖动
默认情况下，`文字不可以拖动`，需要添加`draggable="true"`属性，方可拖动 .
<div class="box"></div>
var img = document.querySelector(".img");
var box = document.querySelector(".box");
//绑定事件
//开始拖拽元素的时候执行
img.ondragstart = function(e){
console.log('drag start');
//保存被拖拽元素信息
e.dataTransfer.setData("type/img",this.className);
//通过事件对象的dataTransfer 属性对象的setData()方法可以保存一个键值对
//使用e.dataTransfer把当前对象的class值保存进去，为了在其他地方使用
}
//结束拖拽元素的时候执行
img.ondragend = function(){
console.log('drag end');
}
// 拖拽中，鼠标进入目标区域的时候执行
box.ondragenter = function(){
console.log('drag enter');
}
// 拖拽中，鼠标在目标区域时，持续执行
box.ondragover = function(e){
console.log('drag over');
// 如果想要drop方法执行，需要清除默认事件(dragover)
// return false;
//只可以清除用'on'绑定的事件
e.preventDefault();
}
// 拖拽中，鼠标离开目标区域的时候执行
box.ondragleave = function(){
console.log('drag leave');
}
// 拖拽中，鼠标在目标区域松开的时候执行，默认不执行
box.ondrop = function(e){
console.log('drop');
//获取保存的class值，然后根据class找到元素，然后把元素拼接到当前元素内部
var classValue = e.dataTransfer.getData("type/img");
var img = document.querySelector("."+classValue);
this.appendChild(img);
}```