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="data:images/oversea01.jpg"></p>

        </div>

    </div>

    <div class="leftFace">

        <div>

            <h2>左面</h2>

            <p><img src="data:images/oversea02.jpg"></p>

        </div>

    </div>

    <div class="rightFace">

        <div>

            <h2>正面</h2>

            <p><img src="data:images/oversea03.jpg"></p>

        </div>

    </div>

</div>

</body>

</html>

CSS3之设计动态立体盒子的更多相关文章

  1. 本周推荐7款CSS3实现的动态特效

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  2. 15个前卫的 HTML5 & CSS3 网页设计作品

    今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...

  3. 32+激发灵感的HTML5/CSS3网页设计教程

      HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...

  4. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  5. 使用jquery的load方法设计动态加载，并解决浏览器前进、后退、刷新等问题

    继上一篇 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 解决了后台业务系统的部分动态加载问题,然而该框架离正常的用户体验还存在一些问题,如:浏览器的前进.后 ...

  6. CSS3 Flex Box（弹性盒子）

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  7. HTML5+CSS3网站设计教程 (张晓景,胡克) [iso]

    <HTML5+CSS3网站设计教程>系统地讲解了CSS的基础理论和实际运用技术,并结合多个案例讲解了采用CSS与层布局相结合制作网页的方法,在详细讲解各个案例的制作中,不仅介绍了CSS样式 ...

  8. css3控制字体动态变换颜色

    css3控制字体动态变换颜色 <!doctype html> <html> <head> <meta charset="utf-8"> ...

  9. 9种纯CSS3人物信息卡片动态展示效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Python学习笔记——正则表达式入门

    # 本文对正则知识不做详细解释,仅作入门级的正则知识目录. 正则表达式的强大早有耳闻,大一时参加一次选拔考试,题目就是用做个HTML解析器,正则的优势表现得淋漓尽致.题外话不多讲,直接上干货: 1. ...

  2. python学习_数据处理编程实例（一）

    目的:用一个实例总结学习到的with语句,函数,列表推导,集合,排序,字符分割等内容 要求:分别以james,julie,mikey,sarah四个学生的名字建立文本文件,分别存储各自的成绩,时间格式 ...

  3. 10款无限滚动自动翻页jquery插件

    2012年3月29日 无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的 结果,改变了一直以来只能通过点击下一页来翻页 ...

  4. Android引导界面

    一.所需素材       很有必要整理一下,里面附带友盟的社会化分享组件,我就不去掉了. 二.代码 import com.umeng.update.UmengUpdateAgent; import a ...

  5. Entity Framework关联实体的三种加载方法

    推荐文章 EF性能之关联加载 总结很好 一:介绍三种加载方式 Entity Framework作为一个优秀的ORM框架,它使得操作数据库就像操作内存中的数据一样,但是这种抽象是有性能代价的,故鱼和熊掌 ...

  6. OneAlert 入门（三）——事件分析

    OneAlert 是国内首个 SaaS 模式的云告警平台,集成国内外主流监控/支撑系统,实现一个平台上集中处理所有 IT 事件,提升 IT 可靠性.有了 OneAlert,你可以更快更合理地为事件划分 ...

  7. Mono for Android 优势与劣势

    原文:Mono for Android 优势与劣势 最近有兴趣了解一下Mono for Andriod,也就是使用.NET平台来开发Andriod程序.Mono for Android API 几乎映 ...

  8. ARP 实现

    ARP 实现 现在我们介绍一下arp的实现,内核版本2.6.24. [数据结构] 协议栈通过ARP协议获取到的网络上邻居主机的IP地址与MAC地址的对应关 系都会保存在这个表中,以备下次与邻居通讯时使 ...

  9. 转载：win7JDK环境配置

    [win7JDK环境配置] 网址:http://blog.sina.com.cn/s/blog_6a9df2330100ms9q.html 系统变量下: (1) 新建->变量名:JAVA_HOM ...

  10. android Theme使用三

    ☆ obtainStyledAttributes参数说明 和使用说明 1)  obtainStyledAttributes(int[]attrs) int[] attrs返回的是attrs.xml里一 ...