CSS3动画3D

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"`属性，方可拖动 .

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);
}```