css3 3d 旋转菜单（纯CSS3实现旋转流星旋转光环效果）
css3 3d 旋转菜单（纯CSS3实现旋转流星旋转光环效果）width: 100%;body {width: 100%;height: 100%;}
别走开，先看图！
沉默了一周的小编，忍不住要爆发了！下面是小编带来的动画效果。相信你在看完之后，实现一些动画效果，再也不用为javascript而犯愁了。只需掌握CSS3，即可轻松实现！
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)
}
好的，小编已经把自己所有的干货都掏出来了，希望大家喜欢，嘿嘿！如果，有任何错误的地方，大家尽可指出，小编期待你的回信。另外，小编也希望和大家多讨论相关东西，一起进步，耶！明天，小编将继续侃CSS特效 谢谢大家的赏脸!
最后，小编在这里祝大家开心快乐幸福！
