css3动画 魔方 无限滚动

.qian li {

background: red;

}

.qian {

transform: translateZ(150px);

/* 向眼睛 位移150px */

}

.hou li {

background: blue;

}

.hou {

transform: translateZ(-150px);

/* 向眼睛 位移-150px */

}

.zuo li {

background: deepskyblue;

}

.zuo {

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

/* 向左边位移150px 沿着y轴转90度 */

}

.you li {

background: pink;

}

.you {

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

/* 向右边位移150px 沿着y轴转90度 */

}

.shang li {

background: yellow;

}

.shang {

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

}

.xia li {

background: orange;

}

.xia {

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

}

.box {

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

}

@keyframes dong {

0% {

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

}

10% {

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

}

20% {

transform: rotateX(60deg) rotateY(90deg);

}

30% {

transform: rotateX(90deg) rotateY(10deg);

}

40% {

transform: rotateX(120deg) rotateY(150deg);

}

60% {

transform: rotateX(130deg) rotateY(200deg);

}

70% {

transform: rotateX(180deg) rotateY(260deg);

}

80% {

transform: rotateX(190deg) rotateY(160deg);

}

90% {

transform: rotateX(140deg) rotateY(90deg);

}

100% {

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

}

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 1
• 2
• 3
• 4
• 5

• 最后前端到底应该怎么学才好？

  如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

  不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。