html5 jquery魔方,以魔方入门前端 – 前端开发，JQUERY特效，全栈开发，vue开发...

前言：最近在知乎上看到余弦回答的如何学习web安全，强调了数据流、输入输出，通过

输入提交“特殊数据”，特殊数据在

数据流的每个层处理，如果某个层没处理好，在

输出的时候，就会出现相应层的安全问题。深感安全相当于逆向思考，故只有先掌握正向，才能更好的理解各种漏洞。本来有点急于求成，想直接学前后端开发一套博客系统，能够借此学习框架等。但考虑了一下，还是得慢慢来，先把前端用一些例子大致的了解了解。

一、任务：图片魔方

二、魔方模型

Practice

*{

margin: 0; //初始所有外边距为0

padding: 0; //初始所有内边距为0

}

.container{

width: 300px;

height: 300px;

margin: 150px auto; //正方体居中

perspective: 20000000px; //视角远一点

}

.box{

width: 300px;

height: 300px;

transform-style: preserve-3d; //3D

transform: rotateX(45deg) rotateY(45deg);//调试用的，方便看

}

.box-page{

width: 300px;

height: 300px;

position: absolute; //六个面初始化到同一个位置

}

.top{

background-color: red;

transform: translateZ(150px);

}

.bottom{

background-color: green;

transform: translateZ(-150px) rotateX(180deg);

}

.left{

background-color: orange;

transform: translateX(-150px) rotateY(90deg);

}

.right{

background-color: pink;

transform: translateX(150px) rotateY(90deg);

}

.before{

background-color: blue;

transform: translateY(150px) rotateX(90deg);

}

.after{

background-color: yellow;

transform: translateY(-150px) rotateX(90deg);

}

//最外层是为了调整正方体的位置，例如居中

三、带图片的魔方

Practice

*{

margin: 0;

padding: 0;

}

.container{

width: 300px;

height: 300px;

margin: 150px auto;

perspective: 20000000px;

}

.box{

width: 300px;

height: 300px;

transform-style: preserve-3d;

transform: rotateX(45deg) rotateY(45deg);

}

.box-page{

width: 300px;

height: 300px;

position: absolute;

}

.top{

background-color: red;

transform: translateZ(150px);

}

.bottom{

background-color: green;

transform: translateZ(-150px) rotateX(180deg);

}

.left{

background-color: orange;

transform: translateX(-150px) rotateY(90deg);

}

.right{

background-color: pink;

transform: translateX(150px) rotateY(90deg);

}

.before{

background-color: blue;

transform: translateY(150px) rotateX(90deg);

}

.after{

background-color: yellow;

transform: translateY(-150px) rotateX(90deg);

}

var arr = document.querySelectorAll(".box-page");

for(var n=0; 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: 2px solid #ffffff; box-sizing: border-box; position: absolute; background-image: url(a"+n+".png); background-size: 300px 300px;";

arr[n].appendChild(divs);

divs.style.left=c*100+"px";

divs.style.top=r*100+"px";

divs.style.backgroundPositionX=-c*100+"px";

divs.style.backgroundPositionY=-r*100+"px";

}

}

}

尚未理解的地方：

url(a”+n+”.png) ：不是很理解为啥是这样拼接的，感觉像字符串拼接，但为啥加号是在里面 -_-

值得深思的地方：

box-sizing: border-box;

我觉得这位网友的解释挺好的：

box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。

如果你创造了一个

没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.)，同时你设置 width:100px; border:10px solid red; padding:10px; 那么最终 div 容器的实际宽度为：

100px(width)+210px(padding)+2*10px(border)=140px

所以你会得到一个比你预期(100px)还要更大的容器，结果就是会破坏网页布局。

注意：容易 margin 的尺寸不会被计算入最终容器宽度，因为对他的定义为对这个容器的留白，但不属于容器本身。

如果当我们定义一个容器的 box-sizing 属性为 border-box 时(表达式：br{box-sizing:border-box})，那么我们创建一个和上段中相同设置的

容器时，那么他的最终宽度即为 100px, 那么它的内容部分(content)的有效宽度变成了 100px-2*10px-2*10px =60px; 所以你会得到一个你预期大小的盒子容器，但是只是被压缩了内容部分尺寸而已，但是对于整体布局而言益处颇多。

四、带动画的魔方

Practice

*{

margin: 0;

padding: 0;

}

.container{

width: 300px;

height: 300px;

margin: 150px auto;

perspective: 20000000px;

}

.box{

width: 300px;

height: 300px;

transform-style: preserve-3d;

/* transform: rotateX(45deg) rotateY(45deg); */

animation: box_ro 20s linear infinite ;

}

@keyframes box_ro {

0%{

transform: rotateX(0deg) rotateY(0deg);

}

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: orange; */

transform: translateX(-150px) rotateY(90deg);

}

.right{

/* background-color: pink; */

transform: translateX(150px) rotateY(90deg);

}

.before{

/* background-color: blue; */

transform: translateY(150px) rotateX(90deg);

}

.after{

/* background-color: yellow; */

transform: translateY(-150px) rotateX(90deg);

}

.box-page div:nth-child(1){

animation: div_move 4s ease-in ;

}

.box-page div:nth-child(2){

animation: div_move 4s ease-in 0.5s;

}

.box-page div:nth-child(3){

animation: div_move 4s ease-in 1s;

}

.box-page div:nth-child(4){

animation: div_move 4s ease-in 1.5s;

}

.box-page div:nth-child(5){

animation: div_move 4s ease-in 2s;

}

.box-page div:nth-child(6){

animation: div_move 4s ease-in 2.5s;

}

.box-page div:nth-child(7){

animation: div_move 4s ease-in 3s;

}

.box-page div:nth-child(8){

animation: div_move 4s ease-in 3.5s;

}

.box-page div:nth-child(9){

animation: div_move 4s ease-in 4s;

}

@keyframes div_move {

0%{

transform: translateZ(0px) scale(1) rotateZ(0deg);

}

20%{

transform: translateZ(300px) scale(0) rotateZ(720deg);

}

90%{

transform: translateZ(300px) scale(0) rotateZ(720deg);

}

100%{

transform: translateZ(0px) scale(1) rotateZ(0deg);

}

}

var arr = document.querySelectorAll(".box-page");

for(var n=0; 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: 2px solid #ffffff; box-sizing: border-box; position: absolute; background-image: url(a"+n+".png); background-size: 300px 300px;";

arr[n].appendChild(divs);

divs.style.left=c*100+"px";

divs.style.top=r*100+"px";

divs.style.backgroundPositionX=-c*100+"px";

divs.style.backgroundPositionY=-r*100+"px";

}

}

}

感悟：以完成动画效果为目的，看了过渡与动画的教学视频。过渡就是从一个状态到另一个状态，关键字：transition 。动画则是多个状态组成，制定动画规则：@keyframes 引入动画 ：animation 。但是实现时，发现css的语法有点冗余，例如实现每一小块的动画效果：.box-page div:nth-child(1) 要连续写9次，不知道有没有类似for循环的方法来改善代码冗余的情况。

五、总结

这次主要是通过一个明确的任务为目标去了解一下前端，感觉自己没办法耐下心来把前端完整的过一遍，所以选择了这个方法。当然，这只是出于了解的目的，如果真的要形成前端的知识体系，我觉得还是得学习完整的教学。

作者：As_usua1