CSS3实现3D六面体

最新推荐文章于 2022-08-17 23:57:52 发布

kongjunchao159

最新推荐文章于 2022-08-17 23:57:52 发布

阅读量1.8k

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/kongjunchao159/article/details/47317473

版权

CSS3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<title></title>
<style>
.cube > div{display:block; position:absolute; width:100px; height:100px; line-height:100px; text-align:center; font-size:60px; color:white;}
.middle{border:1px dashed black; background:transparent;}
.front{border:none; background:rgba(0,0,0,0.3); -webkit-transform:translateZ(50px);}
.back{background:rgba(0,255,0,1); -webkit-transform:translateZ(-50px);}
.right{background:rgba(196,0,0,0.7); -webkit-transform:rotateY(90deg) translateZ(50px);}
.left{background:rgba(0,0,196,0.7); -webkit-transform:rotateY(-90deg) translateZ(50px);}
.top{background:rgba(196,196,0,0.7); -webkit-transform:rotateX(90deg) translateZ(50px);}
.bottom{background:rgba(196,0,196,0.7); -webkit-transform:rotateX(-90deg) translateZ(50px);}
/** -webkit-perspective 透视深度 -webkit-transform-style 指定元素的子元素在3d空间内定位 -webkit-perspective-origin 指定用户从哪个方向看过来的 **/
.cube{margin:300px; width:200px; height:200px; -webkit-perspective:250px; -webkit-transform-style:preserve-3d; -webkit-perspective-origin:-100% -50%;}
</style>
</head>
<body>
<div class="cube">
   <div class="middle"></div>
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
</div>
</body>
</html>

kongjunchao159

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现3D六面体

.cube > div{display:block; position:absolute; width:100px; height:100px; line-height:100px; text-align:center; font-size:60px; color:white;}.middle{border:1px dashed black; background:transparent;}
复制链接

扫一扫