【炫酷旋转相册----使用html书写。附全部源代码】

{

width:100%;

height:100%;

position: absolute;

-webkit-transform-style: preserve-3d;

-webkit-animation:donghua 15s linear 0s infinite;

-moz-transform-style: preserve-3d;

-moz-animation:donghua 15s linear 0s infinite;

-ms-transform-style: preserve-3d;

-ms-animation:donghua 25s linear 0s infinite;

}

#head div

{

position: absolute;

top:0;

left:0;

width:300px;

height:400px;

border:1px solid #000

text-align: center;

line-height:100px;

}

#head div:nth-child(1)

{

-webkit-transform:rotateY(0deg) translateZ(400px);

-moz-transform:rotateY(0deg) translateZ(400px);

-ms-transform:rotateY(0deg) translateZ(400px);

background:url(images/01.gif);

background-size:cover;

}

#head div:nth-child(2)

{

-webkit-transform:rotateY(36deg) translateZ(500px);

-moz-transform:rotateY(36deg) translateZ(500px);

-ms-transform:rotateY(36deg) translateZ(500px);

background:url(images/02.jpg);

background-size:cover;

}

#head div:nth-child(3)

{

-webkit-transform:rotateY(72deg) translateZ(400px);

-moz-transform:rotateY(72deg) translateZ(400px);

-ms-transform:rotateY(72deg) translateZ(400px);

background:url(images/03.gif);

background-size:cover;

}

#head div:nth-child(4)

{

-webkit-transform:rotateY(108deg) translateZ(500px);

-moz-transform:rotateY(108deg) translateZ(500px);

-ms-transform:rotateY(108deg) translateZ(500px);

background:url(images/04.jpg);

background-size:cover;

}

#head div:nth-child(5)

{

-webkit-transform:rotateY(144deg) translateZ(400px);

-moz-transform:rotateY(144deg) translateZ(400px);

-ms-transform:rotateY(144deg) translateZ(400px);

background:url(images/05.gif);

background-size:cover;

}

#head div:nth-child(6)

{

-webkit-transform:rotateY(180deg) translateZ(500px);

-moz-transform:rotateY(180deg) translateZ(500px);

-ms-transform:rotateY(180deg) translateZ(500px);

background:url(images/06.jpg);

background-size:cover;

}

#head div:nth-child(7)

{

-webkit-transform:rotateY(216deg) translateZ(400px);

-moz-transform:rotateY(216deg) translateZ(400px);

-ms-transform:rotateY(216deg) translateZ(400px);

background:url(images/07.gif);

background-size:cover;

}

#head div:nth-child(8)

{

-webkit-transform:rotateY(252deg) translateZ(500px);

-moz-transform:rotateY(252deg) translateZ(500px);

-ms-transform:rotateY(252deg) translateZ(500px);

background:url(images/08.jpg);

background-size:cover;

}

#head div:nth-child(9)

{

-webkit-transform:rotateY(288deg) translateZ(400px);

-moz-transform:rotateY(288deg) translateZ(400px);

-ms-transform:rotateY(288deg) translateZ(400px);

background:url(images/09.gif);

background-size:cover;

}

#head div:nth-child(10)

{

-webkit-transform:rotateY(324deg) translateZ(500px);

-moz-transform:rotateY(324deg) translateZ(500px);

-ms-transform:rotateY(324deg) translateZ(500px);

background:url(images/10.jpg);

background-size:cover;

}

@-webkit-keyframes donghua{

0%{transform:rotateX(5deg) rotateY(360deg)}

50%{transform:rotateX(-5deg) rotateY(180deg)}

100%{transform:rotateX(5deg) rotateY(0deg)}

}

@-moz-keyframes donghua{

0%{transform:rotateY(10deg) rotateY(0deg)}

50%{transform:rotateY(-10deg) rotateY(180deg)}

100%{transform:rotateY(10deg) rotateY(360deg)}

}

@-ms-keyframes donghua{

0%{transform:rotateY(10deg) rotateY(0deg)}

50%{transform:rotateY(-10deg) rotateY(180deg)}

100%{transform:rotateY(10deg) rotateY(360deg)}

}

效果演示

（不看源代码，猜猜有多少张照片？）

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

JavaScript