带你使用vue为女朋友编写一个旋转相册

Posted 2021-09-09 David凉宸

大家都会使用vue脚手架创建一个项目就不一 一的去讲解了
我就直接开始交给大家如何编写代码了

女朋友

我们需要改的几个文件（这里我就使用了一张demo图，大家可以新建一个images文件夹来存放女朋友照片哦）

App.vue:

<template>
  <div id="app">
    <index />
  </div>
</template>

<script>
import index from './components/index.vue'

export default {
  name: 'App',
  components: {
    index
  }
}
</script>

<style>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
//引入css
import './index.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

index.vue:

<template>
    <div class="wrap">
      <div class="cube">
        <div class="liang-one">
          <img
            src="./demo.jpg"
            class="photo"
          />
        </div>
        <div class="liang-two">
          <img
            src="./demo.jpg"
            class="photo"
          />
        </div>
        <div class="liang-three">
          <img
            src="./demo.jpg"
            class="photo"
          />
        </div>
        <div class="liang-four">
          <img
            src="./demo.jpg"
            class="photo"
          />
        </div>
        <div class="liang-five">
          <img
            src="./demo.jpg"
            class="photo"
          />
        </div>
        <div class="liang-six">
          <img
            src="./demo.jpg"
            class="photo"
          />
        </div>
        <span class="liang-front">
          <img
            src="./demo.jpg"
            class="liang-photo"
          />
        </span>
        <span class="liang-back">
          <img
            src="./demo.jpg"
            class="liang-photo"
          />
        </span>
        <span class="liang-left">
          <img
            src="./demo.jpg"
            class="liang-photo"
          />
        </span>
        <span class="liang-right">
          <img
            src="./demo.jpg"
            class="liang-photo"
          />
        </span>
        <span class="liang-top">
          <img
            src="./demo.jpg"
            class="liang-photo"
          />
        </span>
        <span class="liang-bottom">
          <img
            src="./demo.jpg"
            class="liang-photo"
          />
        </span>
      </div>
    </div>
</template>

<script>
export default {
  name: 'wrap'
}
</script>

<style scoped>

</style>

index.css:

html {
	background: #000;
	height: 100%;
}

.wrap {
	position: relative;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 200px;
	height: 200px;
	margin: auto;
}

.cube {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	animation: rotate 20s infinite;
	animation-timing-function: linear;
}

@keyframes rotate {
	from {
		transform: rotateX(0deg) rotateY(0deg);
	}
	to {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

.cube div {
	position: absolute;
	width: 200px;
	height: 200px;
	opacity: 0.8;
	transition: all .4s;
}


.photo {
	width: 200px;
	height: 200px;
}

.cube .liang-one {
	transform: rotateY(0deg) translateZ(100px);
}

.cube .liang-two {
	transform: translateZ(-100px) rotateY(180deg);
}

.cube .liang-three {
	transform: rotateY(90deg) translateZ(100px);
}

.cube .liang-four {
	transform: rotateY(-90deg) translateZ(100px);
}

.cube .liang-five {
	transform: rotateX(90deg) translateZ(100px);
}

.cube .liang-six {
	transform: rotateX(-90deg) translateZ(100px);
}


.cube span {
	display: bloack;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50px;
	left: 50px;
}

.cube .liang-photo {
	width: 100px;
	height: 100px;
}

.cube .liang-front {
	transform: rotateY(0deg) translateZ(50px);
}

.cube .liang-back {
	transform: translateZ(-50px) rotateY(180deg);
}

.cube .liang-left {
	transform: rotateY(90deg) translateZ(50px);
}

.cube .liang-right {
	transform: rotateY(-90deg) translateZ(50px);
}

.cube .liang-top {
	transform: rotateX(90deg) translateZ(50px);
}

.cube .liang-bottom {
	transform: rotateX(-90deg) translateZ(50px);
}



.cube:hover .liang-one {
	transform: rotateY(0deg) translateZ(200px);
}

.cube:hover .liang-two {
	transform: translateZ(-200px) rotateY(180deg);
}

.cube:hover .liang-three {
	transform: rotateY(90deg) translateZ(200px);
}

.cube:hover .liang-four {
	transform: rotateY(-90deg) translateZ(200px);
}

.cube:hover .liang-five {
	transform: rotateX(90deg) translateZ(200px);
}

.cube:hover .liang-six {
	transform: rotateX(-90deg) translateZ(200px);
}

demo图片