Html
    Css
    Js

    
                        
body {
	margin:0;
	overflow:hidden;
	width:100vw;
	height:100vh;
	background:#222;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
}
.world {
	-webkit-perspective:800px;
	perspective:800px;
	width:100vh;
	height:100vh;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
}
.cube {
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	width:50vh;
	height:50vh;
	position:relative;
	-webkit-animation:rotator 4.5s linear infinite;
	animation:rotator 4.5s linear infinite;
	outline:0;
}
.cube * {
	background:#000;
	box-shadow:0 0 3vh currentColor;
	-webkit-transition:background 0.4s ease-in-out,box-shadow 0.4s ease-in-out;
	transition:background 0.4s ease-in-out,box-shadow 0.4s ease-in-out;
}
.cube:hover * {
	background:currentColor;
	box-shadow:0 0 20vh currentColor;
}
.cube .cube__front {
	color:deeppink;
	-webkit-transform:translateZ(25vh);
	transform:translateZ(25vh);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.cube .cube__right {
	color:lightcoral;
	-webkit-transform:rotateY(90deg) translateZ(25vh);
	transform:rotateY(90deg) translateZ(25vh);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.cube .cube__left {
	color:skyblue;
	-webkit-transform:rotateY(270deg) translateZ(25vh);
	transform:rotateY(270deg) translateZ(25vh);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.cube .cube__back {
	color:seagreen;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-webkit-transform:rotateY(180deg) translateZ(25vh);
	transform:rotateY(180deg) translateZ(25vh);
}
.cube .cube__top {
	color:mediumseagreen;
	-webkit-transform:rotateX(90deg) translateZ(25vh);
	transform:rotateX(90deg) translateZ(25vh);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.cube .cube__bottom {
	color:dodgerblue;
	-webkit-transform:rotateX(270deg) translateZ(25vh);
	transform:rotateX(270deg) translateZ(25vh);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
@-webkit-keyframes rotator {
	0% {
	-webkit-transform:rotateX(0deg) rotateY(0deg);
	transform:rotateX(0deg) rotateY(0deg);
}
100% {
	-webkit-transform:rotateX(360deg) rotateY(360deg);
	transform:rotateX(360deg) rotateY(360deg);
}
}@keyframes rotator {
	0% {
	-webkit-transform:rotateX(0deg) rotateY(0deg);
	transform:rotateX(0deg) rotateY(0deg);
}
100% {
	-webkit-transform:rotateX(360deg) rotateY(360deg);
	transform:rotateX(360deg) rotateY(360deg);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

纯css3发光立方体旋转动画

超绚丽CSS3多色彩发光立方体旋转动画DEMO演示??本效果非原创,

以css3写的代码,可以直接复制使用,傻瓜式复制+粘贴,

1
      devoted0
      2017/11/18 10:12:41