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

大家都会使用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 = falsenew Vue({render: h => h(App)
}).$mount('#app')

index.vue:

<template><div class="wrap"><div class="cube"><div class="liang-one"><imgsrc="./demo.jpg"class="photo"/></div><div class="liang-two"><imgsrc="./demo.jpg"class="photo"/></div><div class="liang-three"><imgsrc="./demo.jpg"class="photo"/></div><div class="liang-four"><imgsrc="./demo.jpg"class="photo"/></div><div class="liang-five"><imgsrc="./demo.jpg"class="photo"/></div><div class="liang-six"><imgsrc="./demo.jpg"class="photo"/></div><span class="liang-front"><imgsrc="./demo.jpg"class="liang-photo"/></span><span class="liang-back"><imgsrc="./demo.jpg"class="liang-photo"/></span><span class="liang-left"><imgsrc="./demo.jpg"class="liang-photo"/></span><span class="liang-right"><imgsrc="./demo.jpg"class="liang-photo"/></span><span class="liang-top"><imgsrc="./demo.jpg"class="liang-photo"/></span><span class="liang-bottom"><imgsrc="./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图片

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

程序员送给女朋友的3D旋转相册附背景音乐
送给女朋友的3D旋转相册附背景音乐详细教程及源码如下,简单易上手,亲测有效. 教程如下: 文件建立 spin.css建立 spin.html建立 img文件建立文件建立首先在桌面新建一个名为&qu ...
写给女朋友的3D旋转相册
写给女朋友的3D旋转相册效果图直接把图片换成自己需要的就可以了项目结构核心代码 <!DOCTYPE html> <html> <head lang=" ...
python编写请求参数带文件_转载：如何编写一个带命令行参数的Python文件
看到别人执行一个支持命令行参数的python文件,瞬间觉得高大上起来.牛逼起来,那么如何编写一个带命令行参数的python脚本呢?不用紧张,下面将简单易懂地让你学会如何让自己的python脚本,支持命 ...
VUE 脚手架框架编写一个简洁的登录界面
前言一个好的前端开发项目,都是一个团队负责一个部分进行通力合作的.简单的一个系统网站一般包含登录.主体.各个模块功能这三个大部分,现在我们写的登录界面,我们一般编写这样的登录界面可以说有一定的固定套 ...
手把手教你给女朋友编写一个公众号定时推送（java版本）
2022-08-15 开通微信云托管在公众号推送的云服务器选择上,我选择的是微信云托管. 扫码登陆后,如果是第一次注册试用,没有环境,可以选择自己擅长的语言进行一键部署模板.此处我选择的是Sprin ...
java 带界面的小程序_JAVA 编写一个带有窗口的应用程序
展开全部源代码如下: Tetres_windows.java/** 俄罗斯方块62616964757a686964616fe58685e5aeb931333431366333的窗体*///impor ...
C# 淘宝商品微信返利助手开发-（九）编写一个vue页面用于复制淘口令
系列教程一目录:返利助手原理系列教程二目录:返利助手开放文档以及帐号申请地址系列教程三目录:返利助手开发(1)API介绍系列教程四目录:返利助手开发(2)淘宝分享的内容如何只取淘口令系列教程五 ...
从零开始编写一个vue插件
title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...
编写一个函数，该函数能判断一个英文句子str(带空格)中是否含有某个单词w,如“How old are you?”含有“old”。在main函数中输入一个英文句子，再输入一个单词，如果英文句子中含有那
题目要求: 编写一个C程序,实现以下功能: 编写一个函数,该函数能判断一个英文句子str(带空格(升级版))中是否含有某个单词w,如"How old are you?"含有&quo ...

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

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

最新文章

热门文章