HTML5立方体

最新推荐文章于 2023-01-21 22:47:46 发布

原创最新推荐文章于 2023-01-21 22:47:46 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #class #div

Html5案例专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现三维立体效果的方法，通过巧妙设置元素的位置和变形属性，创建了一个具有阴影效果的立方体，并在其中展示了中秋节的祝福信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>立方体</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{font-size:12px; background:#ccc;}
.box{ position:relative; left:500px; top:300px;}
.box .inBox{ height:200px; width:200px;background:rgba(255,255,255,0.2); position:absolute;-moz-transform-origin:0% 0%;}
.box .inBox:after,.under .box_before:before,.under.box_right:before{background:rgba(0,0,0,0); display:block;height:200px; width:200px; content:" "; position:absolute;left:0px; top:0px;}

.box .box_before{-moz-transform:skew(0deg,20deg);}
.box .box_back{-moz-transform:skew(0deg,20deg); left:200px;top:-73px;}

.box .box_left{-moz-transform:skew(0deg,-20deg);background:rgba(255,255,255,0.1);}
.box .box_right{-moz-transform:skew(0deg,-20deg); left:200px;top:73px; background:rgba(255,255,255,0.2);}

.box .box_top{-moz-transform:rotate(-40deg) skew(30deg,20deg);height:185px; background:rgba(255,255,255,0.4);}
.box .box_bottom{-moz-transform:rotate(-40deg) skew(30deg,20deg);height:185px; top:200px; background:rgba(255,255,255,0.3);}

.box .box_bottom:after{height:185px;-moz-box-shadow:0px -1px0px rgba(255,255,255,0.4),1px 0px 0px rgba(255,255,255,0.4),-1px1px 5px rgba(50,50,50,0.1);}
.box .box_before:after{-moz-box-shadow:0px -1px 0pxrgba(255,255,255,0.6),1px 0px 0px rgba(255,255,255,0.6),0px 1px 0pxrgba(255,255,255,0.6),-1px 0px 0px rgba(255,255,255,0.6);
background:-moz-linear-gradient(-45deg,rgba(255,255,255,0.3),rgba(255,255,255,0.2)40%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0.1));}
.box .box_right:after{-moz-box-shadow:0px -1px 0pxrgba(255,255,255,0.6),1px 0px 0px rgba(255,255,255,0.6),0px 1px 0pxrgba(255,255,255,0.6);
background:-moz-linear-gradient(-45deg,rgba(255,255,255,0.2),rgba(255,255,255,0.1)40%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0));}
.box .box_top:after{height:185px;-moz-box-shadow:0px -1px 0pxrgba(255,255,255,0.6),1px 0px 0px rgba(255,255,255,0.6);\
background:-moz-linear-gradient(-45deg,rgba(255,255,255,0.2),rgba(255,255,255,0.1)40%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0));}
.box .box_left:after{
-moz-box-shadow:1px 0px 0px rgba(255,255,255,0.2);
background:-moz-linear-gradient(-65deg,rgba(255,255,255,0.1),rgba(255,255,255,0)50%,rgba(255,255,255,0.1));}
.box .box_back:after{
background:-moz-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));}

.under .box_before:before,.under .box_right:before{-moz-transform:translate(0px,201px); background:-moz-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3)2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0));}
.under .box_before:before{ width:201px;}

.box .box_before:hover{-moz-transform:skew(0deg, 0deg)translate(0px,73px);}
.box .box_right:hover{-moz-transform:skew(0deg, 0deg);}
.box .box_top:hover{-moz-transform:rotate(-80deg)skew(30deg,20deg);}

.conBox{ padding:10px; font-size:12px; color:#333;line-height:1.5;}
.conBox .title{ color:#222;}

.box2{ position:relative; width:400px; left:900px;top:200px;}
.box3{ position:relative; width:400px; left:700px;top:-73px;}
</style>
</head>

<body>
<div class="box under">
<div class="inBoxbox_left"></div>
<div class="inBoxbox_back"></div>
<div class="inBoxbox_bottom"></div>
<div class="inBox box_right">
<div class="conBox">
<h3class="title">中秋节要来啦</h3>
<p>中秋节要来啦，龙祝大家中秋有月饼吃...哈根达斯冰皮的...</p>
</div>
</div>
<div class="inBox box_before">
<div class="conBox">
<h3class="title">中秋节要来啦</h3>
<p>中秋节要来啦，龙祝大家中秋有月饼吃...哈根达斯冰皮的...</p>
</div>
</div>
<div class="inBoxbox_top"></div>

</div>
<!--
<div class="box box2">
<div class="inBoxbox_before">前</div>
<div class="inBoxbox_back">后</div>
<div class="inBoxbox_left">左</div>
<div class="inBoxbox_right">右</div>
<div class="inBoxbox_top">上</div>
<div class="inBoxbox_bottom">下</div>
</div>

效果如下：