整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
渡系統(tǒng)是Vue.js為DOM動(dòng)畫效果提供的一個(gè)特性，
它能在元素從DOM中插入或移除時(shí)觸發(fā)你的CSS過(guò)渡（transition）和動(dòng)畫（animation），也就是說(shuō)在DOM元素發(fā)生變化時(shí)為其添加特定的class類名，從而產(chǎn)生過(guò)渡效果。
除了CSS過(guò)渡外，Vue.js的過(guò)渡系統(tǒng)也支持javascript的過(guò)渡，
通過(guò)暴露過(guò)渡系統(tǒng)的鉤子函數(shù)，我們可以在DOM變化的特定時(shí)機(jī)對(duì)其進(jìn)行屬性的操作，產(chǎn)生動(dòng)畫效果。
SS過(guò)渡的用法
首先舉一個(gè)例子來(lái)說(shuō)明CSS過(guò)渡系統(tǒng)的使用方式：
<div v-if="show" transition="my-startup"></div>
var vm = new Vue({
el : '#app',
data: {
show : false
}
});
首先在模板中用transition綁定一個(gè)DOM元素，并且使用v-if指令使元素先處于未被編譯狀態(tài)。然后在控制臺(tái)內(nèi)手動(dòng)調(diào)用vm.show = true, 就可以看到DOM元素最后輸出為：
<div class="my-startup-transition"></div>
我們可以看到在DOM元素完成編譯后，過(guò)渡系統(tǒng)自動(dòng)給元素添加了一個(gè)my-startup-transition的class類名。
CSS過(guò)渡鉤子函數(shù)
Vue.js提供了在插入或DOM元素時(shí)類名變化的鉤子函數(shù)，可以通過(guò)Vue.transition('name', {})的方式來(lái)執(zhí)行具體的函數(shù)操作。
顯示聲明過(guò)渡類型
Vue.js可以指定過(guò)渡元素監(jiān)聽(tīng)的結(jié)束事件的類型， 例如：
Vue.transition('done-type', {
type: 'animation'
})
此時(shí)Vue.js就只監(jiān)聽(tīng)元素的animationend事件，避免元素上還存在transition時(shí)導(dǎo)致的結(jié)束事件觸發(fā)不一致。
自定義過(guò)渡類名
除了使用默認(rèn)的類名*-enter, *-leave外，Vue.js也允許我們自定義過(guò)渡類名，例如：
Vue.transition('my-startup', {
enterClass: 'fadeIn',
leaveClass: 'fadeOut'
})
我們可以通過(guò)上述鉤子函數(shù)的例子，觀測(cè)元素的類名變化：
Vue.js官方推薦了一個(gè)CSS動(dòng)畫庫(kù)，animate.css，配合自定義過(guò)渡類名使用，
可以達(dá)到非常不錯(cuò)的效果。
【B站推薦】Vue全套視頻教程，從vue2.0到vue3.0一套全覆蓋，前端必會(huì)的框架教程包含4套優(yōu)質(zhì)VUE練手項(xiàng)目，從零開(kāi)始入門到精通，一套搞定。_嗶哩嗶哩_bilibili
章節(jié)我們主要介紹 Vue.js 的過(guò)渡效果與動(dòng)畫效果。包括如何編寫自定義 CSS 動(dòng)畫、如何配合第三方 CSS 動(dòng)畫庫(kù)、過(guò)渡鉤子函數(shù)的使用、如何使用第三方 JavaScript 動(dòng)畫庫(kù)。本小節(jié)的內(nèi)容相對(duì)之前有些難度，同學(xué)們?cè)陂喿x一遍之后如果不能完全掌握，建議反復(fù)閱讀，并把本小節(jié)的所有案例自己實(shí)現(xiàn)一遍，相信通過(guò)多次的練習(xí)一定可以掌握。
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果。 包括以下工具： 1、在 CSS 過(guò)渡和動(dòng)畫中自動(dòng)應(yīng)用 class； 2、配合使用第三方 CSS 動(dòng)畫庫(kù)，如 Animate.css； 3、在過(guò)渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM； 4、配合使用第三方 JavaScript 動(dòng)畫庫(kù)，如 Velocity.js。
使用 transition 組件包裹需要使用過(guò)渡效果的 DOM 元素。例如：
<transition name = "transition-name">
<div>...</div>
</transition>
接下來(lái)讓我們先看一個(gè)淡入淡出效果的實(shí)現(xiàn)代碼：
實(shí)例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 3s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
</style>
</head>
<body>
<div id = "app">
<button v-on:click = "show = !show">{{ show ? '隱藏' : '顯示'}}</button>
<transition name="fade">
<p v-show = "show" >hello !</p>
</transition>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
show:true
},
methods : {
}
});
</script>
</html>
12345678910111213141516171819202122232425262728293031323334353637運(yùn)行案例點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果
代碼解釋：
那么，transition 組件是如何做到這樣的過(guò)渡效果的呢？
我想，同學(xué)們肯定猜想到當(dāng)元素切換狀態(tài)的時(shí)候，我們定義的樣式會(huì)作用于標(biāo)簽元素 <p>。那么，到底是不是這樣呢？
打開(kāi)控制臺(tái)，檢索到 <p> 標(biāo)簽上，我們可以清晰地看到：
實(shí)際上 Vue 在元素顯示與隱藏的過(guò)渡中，提供了 6 個(gè) class 來(lái)切換：
對(duì)于這些在過(guò)渡中切換的類名來(lái)說(shuō)，如果你使用一個(gè)沒(méi)有名字的 <transition>，則 v- 是這些類名的默認(rèn)前綴。如果你使用了 <transition name="test-transition">，那么 v 會(huì)替換為 test-transition。例如：test-transition-enter、test-transition-enter-active、test-transition-leave…
在日常開(kāi)發(fā)中，我們經(jīng)常會(huì)使用 CSS 過(guò)渡來(lái)實(shí)現(xiàn)一些簡(jiǎn)單的動(dòng)畫效果。接下來(lái)我們用一個(gè)示例來(lái)學(xué)習(xí)如何使用：
實(shí)例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fade-enter-active {
transition: all .3s ease;
}
.fade-leave-active {
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter, .fade-leave-to {
transform: translateY(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id = "app">
<button v-on:click = "show = !show">{{ show ? '顯示' : '隱藏'}}</button>
<transition name = "fade">
<p v-show = "show" >Hello ！</p>
</transition>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
show:true
}
});
</script>
</html>
"運(yùn)行案例" 可查看在線運(yùn)行效果
代碼解釋：
同樣，我們可以使用 CSS 動(dòng)畫來(lái)實(shí)現(xiàn)元素的過(guò)渡效果。CSS 動(dòng)畫用法類似 CSS 過(guò)渡，在過(guò)渡的不同階段對(duì)應(yīng)的 Class 會(huì)作用于元素。但是在動(dòng)畫中 v-enter 類名在節(jié)點(diǎn)插入 DOM 后不會(huì)立即刪除，而是在 animationend 事件觸發(fā)時(shí)刪除。 相信同學(xué)們?cè)谌粘I(yè)務(wù)開(kāi)發(fā)中一定使用過(guò) Dialog，接下來(lái)我們就使用 CSS 動(dòng)畫來(lái)實(shí)現(xiàn)它的過(guò)渡效果：
實(shí)例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#app{
text-align: center;
}
.dialog{
width: 100px;
height: 100px;
border: 1px solid #333;
margin: 60px auto;
text-align: center;
line-height: 100px;
}
.bounce-enter-active {
animation: bounce-in 400ms;
}
.bounce-leave-active {
animation: bounce-out 300ms;
}
@keyframes bounce-in {
0% {
transform: scale(0.7);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
100% {
transform: scale(0.4);
}
}
</style>
</head>
<body>
<div id = "app">
<button v-on:click = "show = !show">{{ show ? '顯示 Dialog' : '隱藏 Dialog'}}</button>
<transition name = "bounce">
<p v-show = "show" class="dialog">Dialog...</p>
</transition>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
show:false
}
});
</script>
</html>
"運(yùn)行案例" 可查看在線運(yùn)行效果
代碼解釋：
在之前的兩個(gè)案例中，我們通過(guò)給 transition 設(shè)置 name 屬性來(lái)指定元素在不同階段的樣式類名，但有時(shí)候希望使用自定義的過(guò)渡類名，我們可以通過(guò)給 transition 設(shè)置以下屬性來(lái)達(dá)到需求：
自定義過(guò)渡的類名優(yōu)先級(jí)高于普通的類名，這樣就能很好地與第三方（如：animate.css）的動(dòng)畫庫(kù)結(jié)合使用。
在很多情況下，Vue 可以自動(dòng)得出過(guò)渡效果的完成時(shí)機(jī)。默認(rèn)情況下，Vue 會(huì)等待其在過(guò)渡效果的根元素的第一個(gè) transitionend 或 animationend 事件。然而也可以不這樣設(shè)定 —— 比如，我們可以擁有一個(gè)精心編排的一系列過(guò)渡效果，其中一些嵌套的內(nèi)部元素相比于過(guò)渡效果的根元素有延遲的或更長(zhǎng)的過(guò)渡效果。
在這種情況下你可以用 組件上的 duration 屬性定制一個(gè)顯性的過(guò)渡持續(xù)時(shí)間 (以毫秒計(jì))：
<transition :duration="1000">...</transition>
你也可以定制進(jìn)入和移出的持續(xù)時(shí)間：
<transition :duration="{ enter: 400, leave: 600 }">...</transition>
transition 組件在過(guò)渡的不同階段會(huì)觸發(fā)相應(yīng)的鉤子函數(shù)：
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<p>...</p>
</transition>
這些鉤子函數(shù)可以結(jié)合 CSS transitions/animations 使用，也可以單獨(dú)使用。
當(dāng)只用 JavaScript 過(guò)渡的時(shí)候，在 enter 和 leave 中必須使用 done 進(jìn)行回調(diào)。否則，它們將被同步調(diào)用，過(guò)渡會(huì)立即完成。
推薦對(duì)于僅使用 JavaScript 過(guò)渡的元素添加 v-bind:css="false"，Vue 會(huì)跳過(guò) CSS 的檢測(cè)。這也可以避免過(guò)渡過(guò)程中 CSS 的影響。
接下來(lái)我們來(lái)看一個(gè)使用鉤子函數(shù)和 Velocity.js 實(shí)現(xiàn)過(guò)渡動(dòng)畫的例子：
實(shí)例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hello{
width: 100px;
height: 100px;
border: 1px solid red;
margin: auto;
}
</style>
</head>
<body>
<div id = "app">
<button @click="show = !show">
切換顯示狀態(tài)
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">
Demo
</p>
</transition>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
show:false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done})
},
leave: function (el, done) {
Velocity(el, { translateX: '20px', rotateZ: '45deg' }, { duration: 600 })
Velocity(el, { rotateZ: '90deg' }, { loop: 3 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
});
</script>
</html>
"運(yùn)行案例" 可查看在線運(yùn)行效果
代碼解釋：
有時(shí)候我們希望給元素設(shè)置初始渲染的過(guò)渡效果，可以通過(guò)給 transition 設(shè)置 appear 的 attribute：
<transition appear>
<!-- ... -->
</transition>
這里默認(rèn)和進(jìn)入 / 離開(kāi)過(guò)渡一樣，同樣也可以自定義 CSS 類名：
<transition
appear
appear-class="v-appear-class"
appear-to-class="v-appear-to-class"
appear-active-class="v-appear-active-class"
>
<!-- ... -->
</transition>
同樣地，可以使用自定義 JavaScript 鉤子：
<transition
appear
v-on:before-appear="beforeAppear"
v-on:appear="appear"
v-on:after-appear="afterAppear"
v-on:appear-cancelled="appearCancelled"
>
<!-- ... -->
</transition>
接下來(lái)我們看一個(gè)完整的示例：
實(shí)例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hello{
width: 100px;
height: 100px;
border: 1px solid red;
margin: auto;
}
.v-appear-class{
opacity: 0;
}
.v-appear-to-class{
opacity: 1;
}
.v-appear-active-class{
transition: all 2s;
}
</style>
</head>
<body>
<div id = "app">
<button v-on:click = "show = !show">隱藏</button>
<transition
appear
appear-class="v-appear-class"
appear-to-class="v-appear-to-class"
appear-active-class="v-appear-active-class"
v-on:before-appear="beforeAppear"
v-on:appear="appear"
v-on:after-appear="afterAppear"
v-on:appear-cancelled="appearCancelled"
>
<p v-show = "show" class="hello">Hello ！</p>
</transition>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
show:true
},
methods: {
beforeAppear() {
console.log('beforeAppear')
},
appear() {
console.log('appear')
},
afterAppear() {
console.log('afterAppear')
},
appearCancelled() {
console.log('appearCancelled')
},
}
});
</script>
</html>
"運(yùn)行案例" 可查看在線運(yùn)行效果
代碼解釋：
本小節(jié)我們介紹了如何使用 transition 實(shí)現(xiàn)過(guò)渡和動(dòng)畫效果，主要包括以下知識(shí)點(diǎn)：
transform：可以對(duì)元素對(duì)象進(jìn)行旋轉(zhuǎn)rotate、縮放scale、移動(dòng)translate、傾斜skew、矩陣變形matrix。
示例：
transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg); /*矩陣變形*/ matrix(<number>,<number>,<number>,<number>,<number>,<number>); /*透視*/ perspective(length);
transition：過(guò)度屬性
transition：過(guò)度效果的css屬性名 過(guò)度效果時(shí)長(zhǎng) 速度效果的速度曲線 過(guò)度效果開(kāi)始時(shí)間；
transition: property duration timing-function delay;/*示例*/transition:1s ease all;-webkit-tansition:1s ease all;-moz-transition:1s ease all;-o-transition:1s ease all;
rotate()：二維空間旋轉(zhuǎn)元素。
若元素設(shè)置了perspective值，可用rotate3d()實(shí)現(xiàn)三維空間內(nèi)旋轉(zhuǎn)。
rotateX(angele)/*相當(dāng)于rotate3d(1,0,0,angle)指定在三維空間內(nèi)的X軸旋轉(zhuǎn)*/rotateY(angele)/*相當(dāng)于rotate3d(0,1,0,angle)指定在三維空間內(nèi)的Y軸旋轉(zhuǎn)*/rotateZ(angele)/*相當(dāng)于rotate3d(0,0,1,angle)指定在三維空間內(nèi)的Z軸旋轉(zhuǎn)*/
scale()
scaleX(<number>)/*只在X軸（水平方向）縮放元素*/scaleY(<number>)/*只在Y軸（垂直方向）縮放*/scaleZ(<number>)/*只在Z軸縮放，前提：元素設(shè)定透視值*/
translate([,])：移動(dòng),是位移量。
translateX(<translation-value>);/*只在X軸（水平方向）移動(dòng)*/translateY(<translation-value>);/*只在Y軸（垂直方向）移動(dòng)*/translateZ(<translation-value>);/*只在Z軸移動(dòng)，前提：元素設(shè)置透視值*/
skew()：傾斜
skewX(<angle>);/*只在X軸（水平）傾斜*/skewY(<angle>);/*只在Y軸（垂直）傾斜*/
matrix(a,c,e,b,d,f)：矩陣變形，c、e的值用正弦或余弦值表示。
a：表示scaleX(); X軸縮放
c：skewY(); Y軸傾斜
e：skewX(); X軸傾斜
b：scaleY(); Y軸縮放
d：translateX() X軸移動(dòng)
f：translateY() Y軸移動(dòng)
transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);
perspective()：透視
.wrap{ perspective:1000px;
}.wrap .child{ transform:perspective(1000px);
}transition-property：過(guò)度的屬性
transition-property:all;/*針對(duì)所有元素都有過(guò)度效果*/transition-property:none;/*沒(méi)有元素有過(guò)度效果*/transition-property:ident;/*指定css屬性有過(guò)度效果，例如width*/
transition-duration：過(guò)度時(shí)間
transition-delay：延遲時(shí)間，為負(fù)數(shù)時(shí)，過(guò)度動(dòng)作會(huì)從該時(shí)間點(diǎn)開(kāi)始顯示，之前的動(dòng)作會(huì)被截?cái)唷?/p>
transition-timing-function：過(guò)度效果，默認(rèn)ease。
transition-timing-function:ease;/*緩解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函數(shù)，既立方貝塞爾*/transition-timing-function:linear;/*線性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函數(shù)*/transition-timing-function:ease-in;/*漸顯效果，等同于cubic-bezier(0.42,0,1.0,1.0)函數(shù)*/transition-timing-function:ease-out;/*漸隱效果，等同于cubic-bezier(0,0,0.58,1.0)函數(shù)*/transition-timing-function:ease-in-out;/*漸顯漸隱效果，等同于cubic-bezier(0.42,0,0.58,1.0)函數(shù)*/transition-timing-function:cubic-bezier;/*特殊的立方貝塞爾曲線效果*/
animation-name：動(dòng)畫名稱，必須與規(guī)則@keyframes配合使用，因?yàn)閯?dòng)畫名稱由@keyframes定義，如果提供多個(gè)屬性值用逗號(hào)隔開(kāi)。
@keyframes相當(dāng)于一個(gè)命名空間，后面跟一個(gè)名詞，如果在class中的animation-name定義了與之對(duì)應(yīng)的name就可以執(zhí)行動(dòng)畫。定義動(dòng)畫時(shí)可直接使用關(guān)鍵字from和to，從一種狀態(tài)過(guò)度到另一種狀態(tài)。
.animation_name{ left:0; top:100px; position: absolute; -webkit-animation: 0.5s 0.5s ease infinite alternate; -moz-animation: 0.5s 0.5s ease infinite alternate; -webkit-animation-name:demo; -moz-animation-name:demo;
}
@-webkit-keyframes demo{ from{left:0;} to{left:400px;}
}
@-webkit-keyframes demo1{
0%{left:0;}
50%{left:200px;}
100%{left:400px;}
}animation-duration：動(dòng)畫時(shí)間
animation-timing-function：播放方式，取值如下：
ease：緩解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函數(shù)，既立方貝塞爾。
linear：線性效果
ease-in：漸顯效果
ease-out：漸隱效果
ease-in-out：漸顯漸隱效果
step-start：馬上跳轉(zhuǎn)到動(dòng)畫結(jié)束狀態(tài)
step-end：保持動(dòng)畫開(kāi)始狀態(tài)，到動(dòng)畫執(zhí)行時(shí)間結(jié)束，馬上跳轉(zhuǎn)到動(dòng)畫結(jié)束狀態(tài)
step([,[start | end]]?)：第一個(gè)參數(shù)number為指定的間隔數(shù)，即把動(dòng)畫分為n步階段性顯示，第二個(gè)參數(shù)默認(rèn)為end，設(shè)置最后一步狀態(tài)，start為結(jié)束時(shí)的狀態(tài)，end為開(kāi)始時(shí)的狀態(tài)，若設(shè)置與animation-fill-mode的效果沖突，以animation-fill-mode的設(shè)置為動(dòng)畫結(jié)束狀態(tài)。
cubic-bezier(,,,)：特殊的立方賽貝爾曲線效果
animation-delay：開(kāi)始播放時(shí)間
animation-iteration-count：播放次數(shù)，取值為infinite時(shí)表示無(wú)限循環(huán)播放
animation-direction：播放方向，取值為：
normal：正常方向
reverse：動(dòng)畫反向運(yùn)行，方向始終與normal相仿
alternate：動(dòng)畫會(huì)循環(huán)正反交替運(yùn)動(dòng)
animation-fill-mode：播放后的狀態(tài)，取值：
none：默認(rèn)值，不設(shè)置
forwards：結(jié)束后保持動(dòng)畫結(jié)束的狀態(tài)
backwards：結(jié)束后返回動(dòng)畫開(kāi)始時(shí)狀態(tài)
both：結(jié)束后可遵循forwards和backwards兩個(gè)規(guī)則
animation-play-state：檢索或設(shè)置對(duì)象動(dòng)畫的狀態(tài)，取值：
running：默認(rèn)，運(yùn)動(dòng)
paused：暫停
transform-origin：變形原點(diǎn)，transform的參照點(diǎn)，默認(rèn)為元素的中心點(diǎn)。有兩個(gè)參數(shù)，參數(shù)一為橫坐標(biāo)，參數(shù)二為縱坐標(biāo)。
percentage：用百分比指定坐標(biāo)值，可負(fù)
length：用長(zhǎng)度指定坐標(biāo)值，可負(fù)
left center right：水平方向取值
top center bottom：垂直方向取值
perspective-prigin：透視原點(diǎn)，定義在X軸和Y軸的3D元素，允許改變3D元素的底部位置，定義該屬性時(shí)，它是一個(gè)元素的子元素，透視圖，而不是元素本身。
注意：使用該屬性必須和perspective屬性一起用，只影響3D轉(zhuǎn)換的元素。
取值：percentage、length、left、center、right、top、center、bottom
backface-visibility：隱藏內(nèi)容的背面，默認(rèn)情況下背面可見(jiàn)，反轉(zhuǎn)后變換的內(nèi)容仍然可見(jiàn)，當(dāng)backface-visibility設(shè)置hidden時(shí)，旋轉(zhuǎn)后內(nèi)容將隱藏，旋轉(zhuǎn)后正面將不再可見(jiàn)。
取值：visible、hidden
transform-style：3D呈現(xiàn)，設(shè)置內(nèi)嵌的元素在3D空間如何呈現(xiàn)，有兩個(gè)值：
flat：所有子元素在2D平面呈現(xiàn)
preserve-3d：保留3D空間
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
