如何通过CSS3实现旋转立方体

互联网 19-1-23

主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果

如今随着CSS3的不断成熟和发展，我们可以利用CSS3变换样式，translateZ，rotateX，rotateY，rotateZ，径向渐变，线性渐变，透视等属性创建一个可以旋转的3D立方体。接下来在文章中将为大家具体介绍如何通过CSS3实现这个旋转立方体效果。具有一定参考价值，希望对大家有所帮助

【推荐课程：CSS3教程】

在立方体内部是六个侧面，它们被定义为单独的图形元素，每个元素具有单独的“后”，“顶”，“底”，“左”，“右”和“前”。所以首先我们要创建html代码。包含这六个元素。如下代码所示

<div class="box"> 		<div class="one"></div> 		<div class="two"></div> 		<div class="three"></div> 		<div class="four"></div> 		<div class="five"></div> 		<div class="six"></div> 	</div>

.box{         position: relative;         width:200px;          height:200px;          transform-style: preserve-3d;/*创造3D空间*/        -webkit-transform-style: preserve-3d;         transition: all 5s linear; 	}

.box div{ 	width:200px; 	height: 200px; 	position: absolute; 	left: 0;        top: 0;        transform-style: preserve-3d;        -webkit-transform-style: preserve-3d;        border: 1px solid #46B8DA;        opacity: 0.5; 	}

           .one{                 transform: rotateY(0deg) translateZ(100px);                 background-color:rgb(255,118,19);             }             .two{                 transform: rotateY(180deg) translateZ(100px);                  background-color:rgb(231,78,72);             }             .three{                 transform: rotateX(90deg) translateZ(100px);                  background-color: rgb(75,165,165);             }             .four{                 transform: rotateX(-90deg) translateZ(100px);                  background-color:rgb(129,182,62);             }             .five{                 transform: rotateY(90deg) translateZ(100px);                 background-color: rgb(255,118,19);             }             .six{                 transform: rotateY(-90deg) translateZ(100px);                  background-color:rgb(244,208,114);             }

.box:hover{                 transform: rotateX(360deg) rotateY(360deg);                 -webkit-transform: rotateX(360deg) rotateY(360deg);             }