[分享]css3怎么实现立体模型旋转

CSS3可以轻松地实现立体模型的旋转效果。采用CSS3的transform属性进行操作，可以直接对元素进行旋转、缩放、平移等操作。代码实现： .box { width: 100px; height: ...

CSS3可以轻松地实现立体模型的旋转效果。采用CSS3的transform属性进行操作，可以直接对元素进行旋转、缩放、平移等操作。

代码实现：

<style>
.box {
    width: 100px; 
    height: 100px;
    background-color: #1abc9c;
    position: relative; 
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
}

.box:hover {
    -webkit-transform: rotateY(180deg);
    transform:rotateY(180deg);
}
</style>

<div class="box"></div> 

上面的代码实现了一个立方体旋转的效果，主要代码如下：

.box {
  	position: relative; 
	/* 设置初值为0deg */ 
	-webkit-transform-style: preserve-3d; 
	transform-style: preserve-3d; 
	-webkit-transition: all 0.5s ease-out; 
	transition: all 0.5s ease-out; 
}
.box:hover {
	transform: rotateX(360deg) rotateY(360deg); 
	-ms-transform: rotateX(360deg) rotateY(360deg);
	/* 更改过渡时间 */ 
	-webkit-transition: all 1.5s ease-in-out; 
	transition: all 1.5s ease-in-out; 
} 

其中，transform-style: preserve-3d;是完成立体效果的关键之一。它会将元素的所有子元素都设置为 3D 环境的一部分，这样元素就可以在三维空间中移动、旋转、缩放。

使用 CSS3 的 transform 属性时，需要设置定位属性，因此设置了position:relative;。

代码实现了在鼠标悬浮时，触发旋转效果，这是通过:hover伪类来实现的，同时使元素依次绕着X轴，Y轴旋转。