Visual Studio Code编写html代码实现立方体相册，表白相册

立方体相册源代码html代码

完整代码（图片链接地址为绝对链接地址即网络上图片）
代码可直接运行

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D立方体相册</title><style type="text/css">#wrap span {display: block;width: 200px;height: 200px;/* background-color: khaki; */position: absolute;top: 75px;left: 75px;}#wrap {width: 350px;height: 350px;margin: 200px auto;animation: rotate 20s infinite;/*3d空间展现*/transform-style: preserve-3d;animation-timing-function: linear;background-image: url("C:\Users\1111\Desktop\立方相册\1414.jpg");}/*设置图片大小*/#wrap img {width: 100%;height: 100%;}#wrap span img {filter: opacity(100%);}#wrap div img {filter: opacity(90%);}/* 第一步，旋转正方形，进行组装*//*第一，前面部分*/#in-front {transform: translateZ(100px);}#in-back {transform: translateZ(-100px);}#in-left {transform: rotateY(90deg) translateZ(-100px);}#in-right {transform: rotateY(90deg) translateZ(100px);}#in-top {transform: rotateX(90deg) translateZ(100px);}#in-bottom {transform: rotateX(90deg) translateZ(-100px);}/*动态参数 @keyframes*/@keyframes rotate {from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}/*设置外层的立方体的相关css*/#wrap div {width: 350px;height: 350px;/* background-color: lightcoral; */position: absolute;transition: all 0.4s;}/*设置旋转角度*/#out-front {transform: translateZ(175px);}#out-back {transform: translateZ(-175px);}#out-left {transform: rotateY(90deg) translateZ(175px);}#out-right {transform: rotateY(-90deg) translateZ(175px);}#out-top {transform: rotateX(90deg) translateZ(175px);}#out-bottom {transform: rotateX(-90deg) translateZ(175px);}#wrap:hover #out-front {transform: translateZ(300px);}#wrap:hover #out-back {transform: translateZ(-300px);}#wrap:hover #out-left {transform: rotateY(90deg) translateZ(300px);}#wrap:hover #out-right {transform: rotateY(-90deg) translateZ(300px);}#wrap:hover #out-top {transform: rotateX(90deg) translateZ(300px);}#wrap:hover #out-bottom {transform: rotateX(-90deg) translateZ(300px);}</style>
</head><body background="https://img-blog.csdnimg.cn/a7b63838ccd84d3ca2190bf859dd9bc7.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5pCs6L-Q44Gu5bel,size_14,color_FFFFFF,t_70,g_se,x_16#pic_center"><!--第一步，准备一个包裹器--><div id="wrap"><!--第二步，先组装内部立方体--><span id="in-front"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1839117210,716615185&fm=26&gp=0.jpg" alt=""></span><span id="in-back"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3334123516,3561617085&fm=11&gp=0.jpg" alt=""></span><span id="in-left"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4182885289,839230546&fm=26&gp=0.jpg" alt=""></span><span id="in-right"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=246491008,3672612617&fm=26&gp=0.jpg" alt=""></span><span id="in-top"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1839903108,208521448&fm=26&gp=0.jpg" alt=""></span><span id="in-bottom"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1271428923,575692103&fm=26&gp=0.jpg" alt=""></span><!--第三步，先组装外部立方体--><div id="out-front"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1006087311,3390563802&fm=26&gp=0.jpg" alt=""></div><div id="out-back"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=175895190,646256579&fm=26&gp=0.jpg" alt=""></div><div id="out-left"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3090518909,3758581548&fm=26&gp=0.jpg" alt=""></div><div id="out-right"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3719673339,1304357720&fm=26&gp=0.jpg" alt=""></div><div id="out-top"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=645130815,185857795&fm=26&gp=0.jpg" alt=""></div><div id="out-bottom"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2730700869,247695185&fm=26&gp=0.jpg" alt=""></div></div>
</body></html>

Visual Studio Code编写html代码实现立方体相册，表白相册相关推荐

如何在ubuntu中编写python_在ubuntu下使用visual studio code编写python
感觉有了visual studio code之后,不管编写什么语言的代码都可以,简单安装对应的语言插件即可. 这不轮到了最近比较热的python语言,蹭着AI的热度,python语言成为了工程师们又一 ...
使用visual studio code调试php代码
这回使用visual studio code折腾php代码的调试,又是一顿折腾,无论如何都进不了断点.好在就要放弃使用visual studio code工具的时候,折腾好了,汗~ 这里把步骤记录下来 ...
Mac用Visual Studio Code编写C/C++安装配置教程
[文字版]Mac用Visual Studio Code编写C/C++教程 - 哔哩哔哩 Mac用Visual Studio Code编写C/C++ 苹果电脑VS Code快速编写C/C++教程_哔哩哔 ...
Visual Studio Code 中部分代码变黑白色(前端vue-element-admin项目测试有效)
@[TOC](Visual Studio Code 中部分代码变黑白色(前端vue-element-admin项目测试有效)) 代码变黑白色使用vue-element-admin 后台模板在Visu ...
使用Visual Studio Code编写和激活ABAP代码 (上)
猪年春节后的第一篇,Jerry祝各位猪年大吉! 2019年的六分之一马上就快过完了,不知道大家在新的一年是否给自己定了新的小目标呢?这里Jerry先预祝大家到2019年年底的时候,在年初制定的小目标都 ...
sap原因代码配置路径_使用Visual Studio Code编写和激活ABAP代码 (上)
猪年春节后的第一篇,Jerry祝各位猪年大吉! 2019年的六分之一马上就快过完了,不知道大家在新的一年是否给自己定了新的小目标呢?这里Jerry先预祝大家到2019年年底的时候,大家年初的小目标都能 ...
如何用Visual Studio Code编写代码(以HTML为例)
1.新建文件并自动生成缺省html代码框架 ①打开Visual Studio Code编辑器使用快捷键Ctrl+N新建文件,就会得到默认的纯文本文件 ②选择编程语言点击"选择编程语言&q ...
vscode自动格式化不符合eslint_VsCode（Visual Studio Code）格式化代码符合EsLint
利用Visual Studio Code ESlint插件,实现自动格式化代码步骤一:安装ESlint插件=>点击Extensions或者Ctrl+Shift+X=>搜索ESlint=& ...
Win7 下使用 Visual Studio Code 编写运行 C 和 C++（环境搭建及使用方法）
系统环境:Win7 64bit 以下给出搭建步骤,每一步更细致的步骤,请查看下方链接: 第一步:下载安装编译器 MinGW-w64 (使用离线包似乎更可靠): 第二步:下载安装 Visual Stud ...

Visual Studio Code编写html代码实现立方体相册，表白相册

立方体相册源代码html代码

Visual Studio Code编写html代码实现立方体相册，表白相册相关推荐

最新文章

热门文章