CSS之立方体绘画步骤

weixin_30715523

于 2016-07-12 14:32:00 发布

阅读量58

点赞数

原文链接：http://www.cnblogs.com/KJ-Z/p/5663439.html

版权

附上总的代码：

<!DOCTYPE html>
<html>
<head>
<title>立方体</title>
<meta charset="utf-8">
<style type="text/css">
.SD{margin: 400px 400px;width: 300px;height: 300px;position: relative;transform-style: preserve-3d;transform: rotateX(30deg) rotateY(30deg);}
.face{width: 100%;height: 100%;border:3px solid red;position: absolute;}
.face:nth-child(1){
transform: rotateX(90deg) translateZ(150px);
}
.face:nth-child(2){
transform: rotateX(90deg) translateZ(-150px);
}
.face:nth-child(3){
transform: rotateY(90deg) translateZ(150px);
}
.face:nth-child(4){
transform: rotateY(90deg) translateZ(-150px);
}
.face:nth-child(5){
transform: translateZ(150px);
}
.face:nth-child(6){
transform: translateZ(-150px);
}
</style>
</head>
<body>
<div class="SD">
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/KJ-Z/p/5663439.html

weixin_30715523

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之立方体绘画步骤

附上总的代码：<!DOCTYPE html><html><head> <title>立方体</title> <meta charset="utf-8"> <style type="text/css"> .SD{margin: 400px 400px;width: 300px;height: 300px;p...
复制链接

扫一扫