码迷,mamicode.com
首页 > Web开发 > 详细

CSS3之设计动态立体盒子

时间:2014-09-15 17:25:59      阅读:389      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   ar   for   

bubuko.com,布布扣

CSS3设计3D效果图

使用到CSS3中的变形、缩放、倾斜。

只写了兼容Gecto的。发张图片鼓励自己

bubuko.com,布布扣
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .cube
    {
        position:fixed;
        left:50%;
        top:12px;
        
    }
    .cube p
    {
        line-height:144px;
        font-size:12px;
    }
    .cube h2
    {
        font-weight:bold;
    }
    .cube.one
    {
        top:200px;
        left:50%;
        margin-left:-200px;
    }
 
    .topFace, .leftFace, .rightFace div             /*统一三面的尺寸*/
    {
        width:272px;
        height:262px;
        padding:10px;
    }
    .topFace, .leftFace, rightFace                /*统一三立面绝对定位*/
    {
        position:absolute;
    } 
     .cube:hover .topFace, .cube:hover .leftFace, .cube:hover .rightFace
    {
        background:#ffc;
    }
     .cube:hover .topFace:hover, .cube:hover .leftFace:hover, .cube:hover .rightFace:hover 
    {
        background:#ffa;
    }    
    
    .leftFace                                 /*变形左边*/
    {
        -moz-transform:skew(0deg,30deg) scale(0.95,0.95);
        background:#ccc;
        top:85px;
        left:-60px;
    }
    .rightFace
    {
        -moz-transform:skew(0deg,-30deg) scale(1,0.95);       /*变形正面*/
        background:#ddd;
        position:absolute;
        left:222px;
        top:80px;
    }
    .topFace div                                /*变形顶面*/
    {
        -moz-transform:skew(0deg,-30deg) scale(1,1.16);
        background:#eee;
        font-size:0.862em;    
    }
    .topFace
    {
        -moz-transform:rotate(60deg);
        top:-150px;
        left:115px;
    }
    </style>
</head>
<body>
<div class="cube one">
    <div class="topFace">
        <div>
            <h2>顶面</h2>
            <p><img src="images/oversea01.jpg"></p>
        </div>
    </div>
    <div class="leftFace">
        <div>
            <h2>左面</h2>
            <p><img src="images/oversea02.jpg"></p>
        </div>
    </div>
    <div class="rightFace">
        <div>
            <h2>正面</h2>
            <p><img src="images/oversea03.jpg"></p>
        </div>
    </div>
</div>
</body>
</html>
View Code

 

CSS3之设计动态立体盒子

标签:style   blog   http   color   io   os   使用   ar   for   

原文地址:http://www.cnblogs.com/wuyinghong/p/3973051.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!