html编写旋转的球,旋转的水晶球(纯css实现)

【实例简介】

【实例截图】

【核心代码】

New Document

body {

background-color: #111;

}

.ball {

position: absolute;

width: 4px;

height: 4px;

margin: auto;

top: 0;

right: 0;

bottom: 0;

left: 0;

transform-style: preserve-3d;

animation: rotate 10s linear infinite;

transform: rotateY(60deg);

}

@keyframes rotate {

0% {

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

}

100% {

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

}

}

.ball__item {

position: absolute;

margin: auto;

top: 0;

right: 0;

bottom: 0;