css3实现建筑物的旋转,CSS3实现旋转光环效果的实现步骤

今天我们来实现一次旋转光环的效果，我们知道很多唱片的圆盘旋转效果都是用CSS3和JS来实现的，下面给大家做一个实例借鉴一下。

2. css完整样式

html {

width: 100%;

height: 100%;

}

body {

width: 100%;

height: 100%;

overflow: hidden;

background-image: -webkit-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);

background-image: -moz-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);

background-image: -ms-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);

background-image: linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);

perspective: 1000px;

}

.bg0 {

width: 500px;

height: 500px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: url(../images/bg0.png) no-repeat center center;

background-size: 150%;

}

.bg1 {

width: 100%;

height: 100%;

background: url(../images/bg1.png) no-repeat center center;

}

.hx-box {

top: 50%;

left: 50%;

width: 500px;

height: 500px;

transform-style: preserve-3d;

transform: translate(-50%, -50%) rotateY(75deg);

}

.hx-box ul {

width: 500px;

height: 500px;

transform-style: preserve-3d;

animation:hxz 20s linear infinite;

}

@keyframes hxz{

0% {

transform: rotateX(0deg);

}

100% {

transform: rotateX(-360deg);

}

}

.hx-box ul li {

width: 500px;

height: 500px;

border: 4px solid #5ec0ff;

border-radius: 1000px;

}

.hx-box ul li span {

display: block;

width: 100%;

height: 100%;

background: url(../images/hx.png) no-repeat center center;

background-size: 100% 100%;

animation: hx 4s linear infinite;

}

@keyframes hx {

to {

transform: rotate(360deg);

}

}

.hx-k2 {

transform: rotateX(60deg) rotateZ(60deg)

}

.hx-k3 {

transform: rotateX(-60deg) rotateZ(-60deg)

}

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：