您现在的位置是：首页 >CSS3网站首页 CSS3

可爱的3D动画

杨小辉
学无止境
2019-02-23
3348 已阅读
1

简介css3 animation动画是非常简单漂亮的，实现步骤也就几步，学会举一反三就离成功不远了。

css部分：

body{background: black;}
	.box{
		width: 80;
		height: 80px;
		position: absolute;
		left:40%;
		top:20%;
		transform-style:preserve-3d;
		transform: perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		animation: 10s move cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
		 background-color: transparent !important;
	}

@keyframes move{
	100% {
	    transform: perspective(800px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}

.box div{
	width: 80px;
	height: 80px;
	line-height: 100px;
	color:white;
	font-size: 60px;
	border: 3px solid #19decd;
    box-shadow: 0 0 100px #19decd;
    text-shadow: 0 0 20px #fff;
    position: absolute;
    left: 0;
    top:0;
    text-align: center;
}

.box div:nth-of-type(1) {
  transform: translateZ(40px);
}

.box div:nth-of-type(2) {
    transform: translateZ(-47px);
}

.box div:nth-of-type(3) {
    transform-origin: top;
    transform: translateZ(40px) rotateX(-90deg);
}

.box div:nth-of-type(4) {
    transform-origin: bottom;
    transform: translateZ(40px) rotateX(90deg);
}

.box div:nth-of-type(5) {
    transform-origin: left;
    transform: translateZ(40px) rotateY(90deg);
}

.box div:nth-of-type(6) {
    transform-origin: right;
    transform: translateZ(40px) rotateY(-90deg);
}

html部分：