css3动画 魔方 无限滚动(1)

margin: 0;

padding: 0;

}

li {

margin: 0;

}

.box {

width: 300px;

height: 300px;

position: relative;

/* 开启3d */

transform-style: preserve-3d;

margin: 200px auto;

animation: dong 10s;

/* infinite 无限循环 */

animation-iteration-count: infinite;

/* linear 匀速 */

animation-timing-function: linear;

}

li {

list-style: none;

display: inline-block;

width: 90px;

height: 90px;

border-radius: 20px;

text-align: center;

line-height: 90px;

background-color: #ccc;

font-size: 40px;

font-weight: 700;

margin: 5px 2px;

}

ul {

width: 300px;

height: 300px;

padding-left: 5px;

position: absolute;

}

.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小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader