CSS3之设计动态立体盒子

最新推荐文章于 2021-08-03 23:38:38 发布

weixin_30321709

最新推荐文章于 2021-08-03 23:38:38 发布

阅读量52

点赞数

原文链接：http://www.cnblogs.com/wuyinghong/p/3973051.html

版权

CSS3设计3D效果图

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

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

<!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

转载于:https://www.cnblogs.com/wuyinghong/p/3973051.html

weixin_30321709

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3之设计动态立体盒子

CSS3设计3D效果图使用到CSS3中的变形、缩放、倾斜。只写了兼容Gecto的。发张图片鼓励自己<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> ...
复制链接

扫一扫