css 转盘奖品 |css tab切换代码

.turntable {
position: relative;
width: 400px;
height: 400px;
background: url(images/turntable_bg.png) no-repeat center center;
background-size: cover;
overflow: hidden;
}
.turntable .box {
position: absolute;
width: 100%;
height: 100%;
transform-origin: center center;
}
.turntable .box:nth-of-type(1) {
transform: rotate(0deg);
}
.turntable .box:nth-of-type(2) {
transform: rotate(60deg);
}
.turntable .box:nth-of-type(3) {
transform: rotate(120deg);
}
.turntable .box:nth-of-type(4) {
transform: rotate(180deg);
}
.turntable .box:nth-of-type(5) {
transform: rotate(240deg);
}
.turntable .box:nth-of-type(6) {
transform: rotate(300deg);
}
.turntable .pointer {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent #fff transparent;
transform: translate(-50%, -50%) rotate(0deg);
transition: all 5s ease-out;
}
.turntable .pointer.active {
transform: translate(-50%, -50%) rotate(720deg);
}

在上面的代码中，大家首先定义了一个名为 `turntable` 的父级容器，在这个容器中包含了六个 div 元素，分别代表了六个奖项。这六个 div 元素的样式使用了 `transform: rotate()` 属性，这个属性可以用来使这些元素绕着一个中心旋转。假设这个中心在父级元素的中心位置，那么大家只需要通过不同的角度来控制每个子元素所处的位置，从而形成一个转盘的效果。

与此同时，大家还需要定义一个指针元素，在这个元素的样式中，大家使用了 `transform: rotate()` 属性来控制它的出现和消失。在初始状态下，指针是不可见的，而在触发抽奖的操作之后，大家会使用 JavaScript 来修改指针的样式，并使其旋转一定的角度，以此来模拟一个转盘的动画效果。