[分享]css3摩天轮怎么只有一边有

CSS3摩天轮是一种常用的网页特效，它可以增加网页的美观程度，使用户的浏览体验更加愉悦。然而，在实际使用中，有时候会遇到摩天轮只有一边出现的问题，下面就来介绍如何解决这个问题。.carousel { ...

CSS3摩天轮是一种常用的网页特效，它可以增加网页的美观程度，使用户的浏览体验更加愉悦。然而，在实际使用中，有时候会遇到摩天轮只有一边出现的问题，下面就来介绍如何解决这个问题。

.carousel {
    width: 200px;
    height: 200px;
    perspective: 600px;
    margin: 50px auto;
}

.carousel div {
    width: 100%;
    height: 100%;
    position: absolute;
    color: #fff;
    font-size: 50px;
    text-align: center;
    line-height: 200px;
    transition: transform 1s;
}

.carousel div:nth-child(1) {
    background-color: #f00;
    transform: rotateX(0deg) translateZ(100px);
}

.carousel div:nth-child(2) {
    background-color: #0f0;
    transform: rotateX(90deg) translateZ(100px);
}

.carousel div:nth-child(3) {
    background-color: #00f;
    transform: rotateX(180deg) translateZ(100px);
}

.carousel div:nth-child(4) {
    background-color: #ff0;
    transform: rotateX(270deg) translateZ(100px);
}

.carousel:hover div {
    transform: rotateX(1***deg);
} 

上述代码是摩天轮的样式代码，其中通过nth-child选择器控制每个面的旋转角度，然后通过: hover伪类控制旋转动画。但是，有时候我们发现只有一个面在旋转，而其他的面却没有任何变化。

解决这个问题很简单，只需要添加如下代码即可：

-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; 

这段代码的作用是保留3D 转换后的元素的 Z 坐标，这样距离视图更远的元素就不会被裁剪掉，从而实现每个面都能够顺利旋转的效果。

总之，只要添加这个代码，就可以轻松解决摩天轮只有一面旋转的问题。