您的位置：首页 > Web前端 > CSS

CSS3制作旋转的3D立方体

2017-12-16 22:08 211 查看
HTML、CSS3制作3D立方体

效果图：



全部代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3D立方体-刘鹏博</title>
<meta name="keywords" content="3D,立方体" />
<meta name="description" content="css3制作旋转3D立方体" />
<style>
/* 设置视角 */
body {perspective: 1000px;}
/* cube 参考父级 */
#cube {/*border: 2px solid red;*/width:200px;height: 200px;margin:200px auto;position: relative;transform-style: preserve-3d;transition: 5s;transform-origin: 50% 50% -100px;}
/* 立方体的六个面 */
#cube div {border: 2px solid blue;width:200px;height:200px;position: absolute;top: 0;left: 0;}
#cube div:nth-child(1) {top: -202px;transform-origin:bottom;transform: rotateX(90deg);}
#cube div:nth-child(2) {top: 202px;transform-origin:top;transform: rotateX(-90deg);}
#cube div:nth-child(3) {left: -202px;transform-origin:right;transform: rotateY(-90deg);}
#cube div:nth-child(4) {left: 202px;transform-origin:left;transform: rotateY(90deg);}
#cube div:nth-child(5) {}
#cube div:nth-child(6) {transform: translateZ(-202px);}
#cube:hover {transform: rotateY(360deg);cursor: pointer;}
</style>
</head>
<body>
<div id="cube">
<div></div> <!-- 上面 -->
<div></div> <!-- 下面 -->
<div></div> <!-- 左面 -->
<div></div> <!-- 右面 -->
<div></div> <!-- 前面 -->
<div></div> <!-- 后面 -->
</div>
</body>
</html>


代码解析：

        这里用了css3的一些新特性，主要包括旋转属性、过渡属性、选择器等。
1、perspective 是设置在body中的视角，这里是为了有立体感，俯视整个立体图效果更佳。就像一句诗“横看成岭侧成峰，远近高低各不同”，“不识庐山真面目，只缘身在此山中”。 

2、transform-style:preserve-3d; 为创建3D空间。

3、transform-origin 为旋转中心；默认为本身的中心点。

4、transform:rotateX(90deg); 为以X轴旋转90度。(deg为度数单位)

5、transform:rotateY(90deg); 为以Y轴旋转90度。

6、transform:ratateZ(); 为以Z轴旋转。

7、transform:translateZ(-202px); 为以Z轴水平位移-202像素。

8、cursor:pointer; 为把鼠标箭头变为手状。

9、:nth-child() 为选择器，其中()括号里面为父级下面相同元素的第几个子元素。(从1开始)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML CSS3 transform transition 3D立方体
相关文章推荐
新的分享
章节导航