3D效果网页布局-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>
在网上无意中看到的图片，觉得不错，就模仿了一个。。
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>3D效果图</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{position: relative;margin: 0 auto;padding: 15px;}
        a{color: #00f000;list-style-type: none;text-decoration: none;}
        .p2 .p3 .p6 .p7 a{color: #000000;;}
        a:hover{color: #ff1013;}
        .container{width: 1000px;height: 660px;margin: 0 auto;position: relative;background-color: #009900;}
        .p1{width: 450px;height: 500px;color: #00fa00;position: absolute;left: 500px;top: 140px;-webkit-transform: skew(60deg,-30deg);}
        .p2{width: 140px;height: 95px;position: absolute;left: 350px;top: 130px;-webkit-transform: skew(60deg,-30deg);}
        .p2_1{width: 140px;height: 95px;color: #999999;font-size: 17px;line-height: 13px;position: absolute;background-color: #ffffff;}
        .p2_2{text-align: center;width: 80px;height: 15px;font-size: 10px;border: 1px solid #bababa;position: absolute;z-index: 1;left: 30px;top: 40px;background-color: #f0f0f0;}
        .p2_2 a:hover{background-color: #aecfff;color: #ff1318;}
        .p3{width: 140px;height: 210px;position: absolute;left: 432px;top: 224px;background-color: #cccccc;-webkit-transform: skew(0deg,-30deg);}
        .p3_1{width: 140px;height: 210px;color: #999999;font-size: 18px;position: absolute;background-color: #cccccc;}
        .p3_2{text-align: center;width: 100px;height: 20px;font-size: 14px;border: 1px solid #bababa; position: absolute;z-index: 1;left: 20px;top: 95px;background-color: #f3f3f3;}
        .p4{height: 210px;width: 165px;position: absolute;left: 267px;top: 217px;background-color: #999999;-webkit-transform: skew(0deg,30deg);}
        .p4_1{width: 165px;height: 150px;overflow: hidden;background-color: #ffffff;margin: 30px 0;}
        .p5{width: 180px;height: 95px;background-color: rgba(40,55,42,0.7);position: absolute;left: 170px; top: 431px;-webkit-transform: skew(60deg,-30deg);}
        .p6{width: 93px;height: 55px;background-color: #fff;position: absolute;left: 620px;top: 385px;font-size: 4px;color: #999999;line-height: 11px;-webkit-transform: skew(60deg,-30deg);}
        .p6_2{width: 70px;height: 10px;background-color: #f0f0f0;border: 1px solid #babbba;position: absolute;top: 22px;left: 10px;}
        .p7{width: 93px;height: 130px;position: absolute;left: 667px;top: 440px;color: #999999;background-color: #cccccc;-webkit-transform: skew(0deg,-30deg);}
        .p7_1{font-size: 12px;}
        .p7_2{text-align: center;width: 70px;height: 13px;font-size: 2px;border: 1px solid #bababa;position: absolute;z-index: 1;left: 10px;top: 55px;background-color: #f3f3f3;}
        .p8{height: 130px;width: 95px;position: absolute;left: 572px;top: 439px;background-color: #999999;/*background-color: rgba(44,45,45,0.2);*/-webkit-transform: skew(0deg,30deg);}
        .p8_1{width: 85px;height: 120px;margin: 5px 5px;border-radius: 10px;background: -webkit-linear-gradient(bottom,#ffffff,black);}
            </style>
</head>
<body>
<div class="container">
    <div class="p1">
        <p> <a href="#">Zachstronaut...</a>
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
        </p>
    </div>
    <div class="p2">
        <div class="p2_1">
            <p>
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube
            </p>
        </div>
        <div class="p2_2">
            <a href="#">HTML Buttom</a>
        </div>
    </div>
    <div class="p3">
        <div class="p3_1">
            <p>
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube isocube isocube
            </p>
        </div>
        <div class="p3_2">
            <a href="#">HTML Buttom</a>
        </div>
    </div>
    <div class="p4">
        <div class="p4_1">
            <a href="#"><img src="xxy.jpg" alt="图片"></a>
        </div>
        <div class="p4_2"></div>
    </div>
    <div class="p5"></div>
    <div class="p6">
        <div class="p6_1">
            <p>
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube
            </p>
        </div>
        <div class="p6_2"><a href="#">HTML Buttom</a></div>
    </div>
    <div class="p7">
        <div class="p7_1">
            <p>
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube
            </p>
        </div>
        <div class="p7_2">
            <a href="#">HTML Buttom</a>
        </div>
    </div>
<div class="p8">
    <div class="p8_1"></div>
    <div></div>
</div>
<div class="p9"></div>
</div>
</body>
</html>
转载于:https://my.oschina.net/FTChrist/blog/211708