css实现3d立体五角星,在网页中，如何使用css实现旋转的3d五角星？

满意答案

insey99915

2017.05.16

采纳率：59%    等级：8

已帮助：260人

你可以看看这段代码

Title

.stage{perspective: 800px;}

.container{width: 150px;height:150px;margin: 200px auto; position: relative;

transform-style: preserve-3d;height:200px;transition:5s;transform-origin: center center 75px;}

.container .side{position: absolute;width: 150px;height: 150px;border:2px solid #0033FF;text-align: center;line-height: 150px;}

.left{left:-152px;transform: rotateY(90deg);transform-origin: right;}

.right{left:152px;transform: rotateY(-90deg);transform-origin: left;}

.top{top:-152px;transform: rotateX(-90deg);transform-origin: bottom;}

.bottom{top:152px;transform: rotateX(90deg);transform-origin: top;}

.front{transform: translateZ(152px);z-index:2;}

.back{z-index:1;}

.container:hover{transform: rotateY(360deg)}

前

后

左

右

上

下

00分享举报