web前端--音乐魔方旋转相册笔记（1）

前段时间，520的时候就用自己学习到的一点HTML,CSS,Javascript等，给女朋友做了一个简单的网页，这里记录一下其中的一小部分—音乐魔方旋转相册。

- 这里魔方相册的例子思路来自学习的一门课程

下面正式开始：
音乐魔方相册：
需要用div来作出一个魔方来展示照片,首先做一个六面的魔方。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge" /><title>送给你的相册</title></head>
<body>
<div class="">
<div class="container"><!--最外层，将做好的魔方放在盒子里，后期定位--><div class="box"><!--整个魔方--><!--作出魔方的6个面，并赋予class名--><div class="box-page top"></div><div class="box-page bottom"></div><div class="box-page left"></div><div class="box-page right"></div><div class="box-page front"></div><div class="box-page back"></div></div>
</div>
</body>

给魔方六个面分别给一种颜色看看，魔方效果。这部分需要css来实现。

*{/*清除页面的参数*/margin: 0;padding: 0;
}
.container{/*魔方的大小，可根据效果调整*/width: 300px;height: 300px;border: 1px solid #000;/*对面做一个边框*/margin: 150px auto;}
.box{width: 300px;/*面的大小自己可以根据魔方大小调整*/height: 300px;box-sizing: border-box;background-color: red;}

此时运行发现页面中只有一个红色的正方形，

其实我们可以将做好的魔方每个面着色并将魔方整体旋转一下，将便于观察。
上面添加：

       /*控制子元素3D转换*/transform-style:preserve-3d;            /*将盒子旋转，测试代码*/transform:rotateX(45deg) rotateY(45deg);

可以看到的效果如下：

上图是魔方转换到某时刻时的截图，可以看出，我们前面创建的魔方六个面全部在魔方的中间，因此要实现魔方六个面分别在魔方的上下左右前后，需要将六个面进行旋转。
（其实六个面是重叠在一起，在魔方底面，这里截图是为了后面建立坐标轴便于理解。）

我们可以自己对魔方建立X,Y,Z坐标轴。可以自己画一下，便于我们写面的旋转。
（下面我简单的画了一下，哈哈哈）
箭头方向均为正方向，反方向，数值为负。

这里需要用属性 transform，
（1）用到的旋转方法为，rotateX(),rotateY(),rotateZ(),按照x方向旋转则为rotateX(),y方向为rotateY()..，括号里为旋转角度；
（2）还要用到.translate() 方法，使元素从其当前位置移动，括号里写移动的距离 ，这里为坐标。

下面为六个面的旋转，移动，代码：

.box-page{width: 300px;height: 300px;position: absolute;/*位置初始化，相对于魔方盒子定位*/transform-style:preserve-3d;/*必须有该属性，否则将不会旋转，移动。*/}
.top{transform:translateZ(150px);/*150px,正值为沿着Z轴向上（正方向）移动150px;负值则为向下（反方向）移动。*/}
.bottom{transform:translateZ(-150px) rotateX(180deg);/*正值为沿着Z轴向上（正方向）移动150px;负值则为向下（反方向）移动。rotateX()方法则为沿着X轴旋转，180deg为旋转角度*/}
.left{transform: translateX(-150px) rotateY(-90deg);}
.right{transform:translateX(150px) rotateY(90deg);}
.front{transform:translateY(150px) rotateX(-90deg);}
.back{transform: translateY(-150px) rotateX(90deg);}

此时整个魔方相册只是有了六个面，还需要让它动起来，那么需要运用到元素动画的芝士，animation：属性的参数，自己可以查查。

/*创建动画*/
.box{animation:ro 4s linear infinite ;/*属性分别为，动画名，动画时间，速度，持续时间*/animation-direction: alternate;}
/*需要将动画绑定在选择器上*/
/*分别在0%，34%，66%，100%时刻，旋转整个魔方。*/
@keyframes ro{0%{transform: rotateX(0deg) rotateY(0deg);}34%{              transform: rotateX(90deg) rotateY(90deg);}66%{  transform: rotateX(180deg) rotateY(180deg);}100%{               transform: rotateX(360deg) rotateY(360deg);}}

此时魔方的动画效果（这里将每个面填充为颜色，可自己换为照片）如下，下图为转动起来某刻的魔方截图：
可将每个面的图片分割成九个小块，按照动画向外飞出去，效果图列出来，js实现代码如下：

<script type="text/javascript">var arr = document.querySelectorAll(".box>div");for (var n= 0;n<arr.length; n++){//遍历每个面for(var r=0; r <3; r++){//外层循环每个面的行for (var c=0; c<3;c++){//内层循环遍历每个面的列// 创建元素var divs = document.createElement("div");divs.style.cssText ="width:100px;height:100px;border:1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(images/a"+n+".jpg); background-size:300px 300px;";arr[n].appendChild(divs);//改变每一个div的位置；divs.style.left = 100*r+"px";divs.style.top = 100*c +"px";// 改变背景图相应的位置divs.style.backgroundPositionX = -r*100+"px";divs.style.backgroundPositionY = -c*100+"px";  }}}
</script>

css部分的样式代码，

代码如下：
/*每一个小方格的样式：*/
.box-page div:nth-child(1){animation: al 4s linear ;}
.box-page div:nth-child(2){animation: al 4s linear 0.5s;}
.box-page div:nth-child(3){         animation: al 4s linear 1s;}
.box-page div:nth-child(4){animation: al 4s linear 1.5s;}
.box-page div:nth-child(5){animation: al 4s linear 2s;}
.box-page div:nth-child(6){animation: al 4s linear 2.5s;}
.box-page div:nth-child(7){animation: al 4s linear 3s;}
.box-page div:nth-child(8){animation: al 4s linear 3.5s;}
.box-page div:nth-child(9){animation: al 4s linear 4s;}/*每一个魔方面的小方格动画。*/
@keyframes al{0%{              transform: translateZ(0px) scale(1) rotateZ(0deg);}30%{         transform: translateZ(300px) scale(0) rotateZ(360deg);}90%{ transform: translateZ(300px) scale(0) rotateZ(360deg);}100%{        transform: translateZ(0px) scale(1) rotateZ(0deg);}}

动画都实现了，魔方可以整体动，魔方六个面每个面还可以分割成九个小块，实现动态效果，那还缺点音乐：

添加下列代码可实现：
<audio src="music1.mp3" autoplay="autoplay" loop="loop"></audio>

有其他想法还可以加点，比如可以加个视频，画布，这部分为html5的东西，后期有想法再完善吧.

整个魔方相册的实现完整代码如下：

<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge" /><title>相册</title><style type="text/css">*{margin: 0;padding: 0;}.container{width: 300px;height: 300px;/*border: 1px solid #000;*/margin: 150px auto;perspective: 200000px;/*调整视距，不然魔方看着是扁的*/}body{width: 100%;height: 100%;/* background:#FDF5E6;*/background-size: screen;}.box{width: 300px;height: 300px;box-sizing: border-box;/*控制子元素3D转换*/transform-style:preserve-3d;            /*将盒子旋转，测试看看*//*transform:rotateX(45deg) rotateY(45deg);*/animation:ro 4s linear infinite ;animation-direction: alternate;}@keyframes ro{0%{ transform: rotateX(0deg) rotateY(0deg);}34%{            transform: rotateX(90deg) rotateY(90deg);}66%{          transform: rotateX(180deg) rotateY(180deg);}100%{               transform: rotateX(360deg) rotateY(360deg);}}.box-page{width: 300px;height: 300px;position: absolute;/*位置初始化*/transform-style:preserve-3d;}.top{background-color: red;transform:translateZ(150px);}.bottom{background-color: green;transform:translateZ(-150px) rotateX(180deg);}.left{background-color: pink;transform: translateX(-150px) rotateY(-90deg);}.right{background-color:blue;transform:translateX(150px) rotateY(90deg);}.front{background-color: yellow;transform:translateY(150px) rotateX(-90deg);}.back{background-color: orange;transform: translateY(-150px) rotateX(90deg);}    .box-page div:nth-child(1){animation: al 4s linear ;}.box-page div:nth-child(2){animation: al 4s linear 0.5s;}.box-page div:nth-child(3){animation: al 4s linear 1s;}.box-page div:nth-child(4){animation: al 4s linear 1.5s;}.box-page div:nth-child(5){animation: al 4s linear 2s;}.box-page div:nth-child(6){animation: al 4s linear 2.5s;}.box-page div:nth-child(7){animation: al 4s linear 3s;}.box-page div:nth-child(8){animation: al 4s linear 3.5s;}.box-page div:nth-child(9){animation: al 4s linear 4s;}   @keyframes al{0%{              transform: translateZ(0px) scale(1) rotateZ(0deg);}30%{             transform: translateZ(300px) scale(0) rotateZ(360deg);}90%{             transform: translateZ(300px) scale(0) rotateZ(360deg);}100%{                transform: translateZ(0px) scale(1) rotateZ(0deg);}}</style>
</head>
<body><audio src="music1.mp3" autoplay="autoplay" loop="loop"></audio><!--魔方照片有六个面-->
<div class="container"><!--最外层--><div class="box"><!--6个面的父元素盒子--><div class="box-page top"></div><div class="box-page bottom"></div><div class="box-page left"></div><div class="box-page right"></div><div class="box-page front"></div><div class="box-page back"></div></div>
</div>
<!--
<script type="text/javascript">var arr = document.querySelectorAll(".box>div");for (var n= 0;n<arr.length; n++){//遍历每个面for(var r=0; r <3; r++){//外层循环每个面的行for (var c=0; c<3;c++){//内层循环遍历每个面的列// 创建元素var divs = document.createElement("div");divs.style.cssText ="width:100px;height:100px;border:1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(images/a"+n+".jpg); background-size:300px 300px;";arr[n].appendChild(divs);//改变每一个div的位置；divs.style.left = 100*r+"px";divs.style.top = 100*c +"px";// 改变背景图相应的位置divs.style.backgroundPositionX = -r*100+"px";divs.style.backgroundPositionY = -c*100+"px"; }}}
</script>
</body>
</html>

就先这些了，520 做的其他东西，改天再更，比如，给她做的属于他的网页，在一起的时间墙，打印字幕，画布等等。

第一次，想着写点东西，好多不规范（哭了），多写几次就好了吧
大家一起加油
奥利给！！！O(∩_∩)O哈哈~

web前端--音乐魔方旋转相册笔记（1）相关推荐

正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测字符串是否符合 &q ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
web前端攻城狮学习笔记——HTML基础
开始学习web前端开发基础了,我是跟着清华大学在学堂在线的<Web前端攻城狮>学习的,把一些笔记记在这里,方便后期查阅. 1 HTML基础 HTML是超文本语言. 一段HTML代码: &l ...
web前端之初级html-学习笔记分享一
初级html学习笔记一一.基础认知目标:认识网页组成和五大浏览器,明确web标准的构成,使用HTML骨架搭建出一个网页学习路径: 1.基础概念 1.认识网页 ...
web前端开发最佳实践--（笔记之JavaScript最佳实践）
如何避免全局变量污染? 避免定义全局变量或全局函数用一个变量进行封装,并返回外部需要访问的接口如何写出高维护的js代码配置数据和代码逻辑分离如: 改成: --- 用js模板 mustache ...
Web前端入门之HTML基础笔记
目录 1.我的第一个HTML页面 2.基本标签 3.实体符号 4.表格 5.表格-单元格的合并 6.表格-th标签 7.表格-thead tbody tfoot 8.背景颜色和背景图片 9.图片 1 ...
Web前端开发之CSS学习笔记11—文本格式和动画设计
目录 1.文本对齐text -align 2.保留空白字符white-space 3.设置文本方向direction 4.设置文本缩进text-indent 4.设置字符间距letter-spacin ...
web前端基础——超链接（dw笔记版）
语法结构 <a href="目标网址">链接的文字 </a> 实例: <ol> <li><a href="https ...
web前端培训—css源码笔记（二）【爱创课堂】
复习: css介绍:cascading style sheet 层叠样式表引入css目的: 引入css好处: css组成:选择符和声明,声明包括样式和样式值 css引入方式 css文件本身不 ...

web前端--音乐魔方旋转相册笔记（1）

下面正式开始：

整个魔方相册的实现完整代码如下：

web前端--音乐魔方旋转相册笔记（1）相关推荐

最新文章

热门文章