水晶盒

HTML

<div class="box under">
    <div class="inBox box_left">纯CSS3设计的水晶盒</div>
    <div class="inBox box_back">纯CSS3设计的水晶盒</div>
    <div class="inBox box_bottom">纯CSS3设计的水晶盒</div>
    <div class="inBox box_right">
        <div class="conBox">
            <h3 class="title">纯CSS3设计的水晶盒</h3>
            <p>纯CSS3设计的水晶盒...纯CSS3设计的水晶盒...</p>
        </div>
    </div>
    <div class="inBox box_before">
        <div class="conBox">
            <h3 class="title">纯CSS3设计的水晶盒</h3>
            <p>纯CSS3设计的水晶盒...纯CSS3设计的水晶盒...</p>
        </div>
    </div>
    <div class="inBox box_top"><br>
        <br>
        纯CSS3设计的水晶盒</div>
</div>
					    

CSS

* {
    margin: 0px;
    padding: 0px;
}
body {
    font-size: 12px;
    background: #ccc;
}
.box {
    position: relative;
    left: 100px;
    top: 100px;
}
.box .inBox {
    height: 200px;
    width: 200px;
    background: rgba(255,255,255,0.2);
    position: absolute;
    -webkit-transform-origin: 0% 0%;
    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 {
    -webkit-transform: skew(0deg, 20deg);
    transform: skew(0deg, 20deg);
}
.box .box_back {
    -webkit-transform: skew(0deg, 20deg);
    transform: skew(0deg, 20deg);
    left: 200px;
    top: -73px;
}
.box .box_left {
    -webkit-transform: skew(0deg, -20deg);
    transform: skew(0deg, -20deg);
    background: rgba(255,255,255,0.1);
}
.box .box_right {
    -webkit-transform: skew(0deg, -20deg);
    transform: skew(0deg, -20deg);
    left: 200px;
    top: 73px;
    background: rgba(255,255,255,0.2);
}
.box .box_top {
    -webkit-transform: rotate(-40deg) skew(30deg, 20deg);
    transform: rotate(-40deg) skew(30deg, 20deg);
    height: 185px;
    background: rgba(255,255,255,0.4);
}
.box .box_bottom {
    -webkit-transform: rotate(-40deg) skew(30deg, 20deg);
    transform: rotate(-40deg) skew(30deg, 20deg);
    height: 185px;
    top: 200px;
    background: rgba(255,255,255,0.3);
}
.box .box_bottom:after {
    height: 185px;
    -webkit-box-shadow: 0px -1px 0px rgba(255,255,255,0.4), 1px 0px 0px rgba(255,255,255,0.4), -1px 1px 5px rgba(50,50,50,0.1);
    box-shadow: 0px -1px 0px rgba(255,255,255,0.4), 1px 0px 0px rgba(255,255,255,0.4), -1px 1px 5px rgba(50,50,50,0.1);
}
.box .box_before:after {
    -webkit-box-shadow: 0px -1px 0px rgba(255,255,255,0.6), 1px 0px 0px rgba(255,255,255,0.6), 0px 1px 0px rgba(255,255,255,0.6), -1px 0px 0px rgba(255,255,255,0.6);
    box-shadow: 0px -1px 0px rgba(255,255,255,0.6), 1px 0px 0px rgba(255,255,255,0.6), 0px 1px 0px rgba(255,255,255,0.6), -1px 0px 0px rgba(255,255,255,0.6);
    background: -webkit-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));
    background: 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 {
    -webkit-box-shadow: 0px -1px 0px rgba(255,255,255,0.6), 1px 0px 0px rgba(255,255,255,0.6), 0px 1px 0px rgba(255,255,255,0.6);
    box-shadow: 0px -1px 0px rgba(255,255,255,0.6), 1px 0px 0px rgba(255,255,255,0.6), 0px 1px 0px rgba(255,255,255,0.6);
    background: -webkit-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));
    background: 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;
    -webkit-box-shadow: 0px -1px 0px rgba(255,255,255,0.6), 1px 0px 0px rgba(255,255,255,0.6);
    box-shadow: 0px -1px 0px rgba(255,255,255,0.6), 1px 0px 0px rgba(255,255,255,0.6);
    background: -webkit-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));
    background: 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 {
    -webkit-box-shadow: 1px 0px 0px rgba(255,255,255,0.2);
    box-shadow: 1px 0px 0px rgba(255,255,255,0.2);
    background: -webkit-linear-gradient(-65deg, rgba(255,255,255,0.1), rgba(255,255,255,0) 50%, rgba(255,255,255,0.1));
    background: 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: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.1), rgba(255,255,255,0));
    background: 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 {
    -webkit-transform: translate(0px, 201px);
    transform: translate(0px, 201px);
    background: -webkit-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));
    background: 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 {
    -webkit-transform: skew(0deg, 0deg) translate(0px, 73px);
    transform: skew(0deg, 0deg) translate(0px, 73px);
    top:38px;
}
.box .box_right:hover {
    -webkit-transform: skew(0deg, 0deg);
    transform: skew(0deg, 0deg);
}
.box .box_top:hover {
    -webkit-transform: rotate(-80deg) skew(30deg, 20deg);
    transform: rotate(-80deg) skew(30deg, 20deg);
}
.box .box_before, .box .box_back, .under .box_before:before { width: 300px; }
.box .box_right {
    left: 300px;
    top: 110px;
}
.box .box_top, .box .box_bottom { height: 278px; }
.box .box_bottom:after { height: 280px; }
.under .box_before:after { width: 300px; }