css如何鼠标悬停旋转div

CSS是网页设计中必不可少的一部分，其中有一个常见的效果是鼠标悬停旋转div，下面就让我们来看一下如何实现这一效果。

    .Box {
        width: 300px;
        height: 300px;
        position: relative;
        transition: all 0.5s ease;
        transform-style: preserve-3d;
    }

    .Box:hover {
        transform: rotateY(180deg);
    }

    .front,.back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
    }

    .front {
        background-color: #9b59b6;
    }

    .back {
        background-color: #2980b9;
        transform: rotateY(180deg);
    }

首先，我们需要一个父级元素来包含div，这里给定的class为“Box”。

然后，我们定义“Box”的宽度、高度、定位属性和过渡效果，其中“transform-style”需要设置为“preserve-3d”，以便让子元素旋转。

接着，在“Box:hover”伪类中，我们使用“rotateY”函数来旋转元素，这里值为“180deg”表示180度。

现在我们来看一下子元素的设置。我们为父级元素“Box”添加两个子元素，分别为“front”和“back”。

我们要保证让子元素旋转不影响其他子元素，需要设置子元素的“backface-visibility”属性为“hidden”。

最后，为了区分子元素之间的差异，我们给“front”和“back”不同的背景颜色，并让“back”元素也旋转，这里设置为“rotateY(180deg)”。

通过以上的代码，我们就可以实现鼠标悬停旋转div的效果了。