用CSS3实现立方体
先设置一个父元素,使用定位将子元素像扑克牌堆叠在父元素上,再将子元素进行相应的位移,旋转方可得一个立方体。设置动画效果,使立方盒自动旋转,当鼠标碰到时停止旋转。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;padding:0px;}
.box{
width:400px;
height:400px;
margin:500px auto;
position:relative;/*定位*/
transform-style:preserve-3d;/*形成3D空间,给父级元素添加*/
}
.box div{
width:400px;
height:400px