demo:http://www.htmleaf.com/Demo/201501251274.html
1 .正6變形內(nèi)角720度缩滨。
2 .:style="transform:divRotate(i)"這個(gè)是可以傳值的。
3 ..vue里面的文件，只要是需要到的數(shù)據(jù)，必須在data里面聲明官脓。
4 .3D場(chǎng)景的dom層級(jí)結(jié)構(gòu)一定要是這樣 舞臺(tái)--容器--顯示內(nèi)容
<template>
<div class="stage">
<div class="container" :style="{transform:containerRotate()}">
<div v-for="i in 9"
:style="{transform:divRotate(i)}"
class="img" >
{{i}}
</div>
</div>
<button @click="last">last</button>
<button @click="next">next</button>
</div>
</template>
<script>
export default {
data:function(){
return{
rotate:0,
worldZ:0,
worldY:0,
}
},
mounted(){
this.rotate=360/9;
this.worldZ= 50/Math.tan((this.rotate/2)/180 * Math.PI)+60
},
methods:{
divRotate(i){
return `translateX(10px) rotateY(${i*this.rotate}deg) translateZ(${this.worldZ}px)`
},
containerRotate(){
return `rotateX(-10deg) rotateY(${this.worldY}deg)`
},
last(){
this.worldY+=this.rotate;
},
next(){
this.worldY-=this.rotate;
}
}
}
</script>
<style>
.stage{
width: 900px;
height: 900px;
background: #eee;
perspective: 800px;
//關(guān)鍵
position: relative;
}
.container{
width: 128px;
height: 100px;
transition:all 1s;
transform-style: preserve-3d;
//關(guān)鍵
position: absolute;
left:50%;
top:30%;
}
.img{
width: 128px;
height: 100px;
box-shadow: 0 1px 3px rgba(0,0,0,.5);
transition:opacity 1s,transform 1s;
position:absolute;
/* *定位的時(shí)候他們一定要基于一個(gè)原點(diǎn)林螃。* */
bottom: 0;
background: yellowgreen;
}
@keyframes zhuan {
0%{
transform: rotateY(0deg)
}100%{
transform:rotateY(360deg)
}
}
</style>
