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);*/```

#元素拖動
> 在網(wǎng)頁中，`鏈接、文字、圖片`都可以被拖動
默認情況下，`文字不可以拖動`，需要添加`draggable="true"`屬性，方可拖動 .

<div class="box"></div>
var img = document.querySelector(".img");
var box = document.querySelector(".box");
//綁定事件
//開始拖拽元素的時候執(zhí)行
img.ondragstart = function(e){
console.log('drag start');
//保存被拖拽元素信息
e.dataTransfer.setData("type/img",this.className);
//通過事件對象的dataTransfer 屬性對象的setData()方法可以保存一個鍵值對
//使用e.dataTransfer把當前對象的class值保存進去，為了在其他地方使用
}
//結束拖拽元素的時候執(zhí)行
img.ondragend = function(){
console.log('drag end');
}
// 拖拽中，鼠標進入目標區(qū)域的時候執(zhí)行
box.ondragenter = function(){
console.log('drag enter');
}
// 拖拽中，鼠標在目標區(qū)域時，持續(xù)執(zhí)行
box.ondragover = function(e){
console.log('drag over');

    // 如果想要drop方法執(zhí)行，需要清除默認事件(dragover)
    // return false;
        //只可以清除用'on'綁定的事件
    e.preventDefault();
}
// 拖拽中，鼠標離開目標區(qū)域的時候執(zhí)行
box.ondragleave = function(){
    console.log('drag leave');
}
// 拖拽中，鼠標在目標區(qū)域松開的時候執(zhí)行，默認不執(zhí)行
box.ondrop = function(e){
    console.log('drop');
    //獲取保存的class值，然后根據(jù)class找到元素，然后把元素拼接到當前元素內(nèi)部
    var classValue = e.dataTransfer.getData("type/img");
    var img = document.querySelector("."+classValue);
    this.appendChild(img);
}```