CSS3之设计动态立体盒子
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之设计动态立体盒子的更多相关文章
- 本周推荐7款CSS3实现的动态特效
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
- 15个前卫的 HTML5 & CSS3 网页设计作品
今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...
- 32+激发灵感的HTML5/CSS3网页设计教程
HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...
- 纯CSS3彩色边线3D立体按钮制作教程
原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
- 使用jquery的load方法设计动态加载，并解决浏览器前进、后退、刷新等问题
继上一篇 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 解决了后台业务系统的部分动态加载问题,然而该框架离正常的用户体验还存在一些问题,如:浏览器的前进.后 ...
- CSS3 Flex Box（弹性盒子）
CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
- HTML5+CSS3网站设计教程 (张晓景,胡克) [iso]
<HTML5+CSS3网站设计教程>系统地讲解了CSS的基础理论和实际运用技术,并结合多个案例讲解了采用CSS与层布局相结合制作网页的方法,在详细讲解各个案例的制作中,不仅介绍了CSS样式 ...
- css3控制字体动态变换颜色
css3控制字体动态变换颜色 <!doctype html> <html> <head> <meta charset="utf-8"> ...
- 9种纯CSS3人物信息卡片动态展示效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Web模板引擎本质前奏
执行字符串表示的函数,并为该函数提供全局变量: #! /usr/bin/env python3 namespace = {'name': 'zingp', 'data': [16, 19, 25]} ...
- windows server 2008 R2 忘记administrator密码
第一步: 插入安装光盘,重光驱启动系统,在选择“安装语言”的地方,按shift+F10 在弹出的CMD窗口中,输入以下地址: x:\>c: c:\>cd windows\system32 ...
- POJ 3687 Labeling Balls 逆向建图，拓扑排序
题目链接: http://poj.org/problem?id=3687 要逆向建图,输入的时候要判重边,找入度为0的点的时候要从大到小循环,尽量让编号大的先入栈,输出的时候注意按编号的顺序输出重量, ...
- PHP之路——大文件上传
修改php.ini 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本最大执行时间,超过这个时间就会报错 3.upl ...
- 把内表 itab1 的 n1 到 n2 行内容附加到 itab2 内表中去.
语法:append lines of itab1 [ from n1 ] [ to n2 ] to itab2. DATA:BEGIN OF gt_00 OCCURS 0, l_01 ...
- 【2011 Greater New York Regional 】Problem I :The Golden Ceiling
一道比较简单但是繁琐的三维计算几何,找错误找的我好心酸,没想到就把一个变量给写错了 = =: 题目的意思是求平面切长方体的截面面积+正方体顶部所遮盖的面积: 找出所有的切点,然后二维凸包一下直接算面积 ...
- 【网络流24题】 No.3 最小路径覆盖问题 （网络流|匈牙利算法 ->最大二分匹配）
[题意] 给定有向图 G=(V,E).设 P 是 G 的一个简单路(顶点不相交) 的集合.如果 V 中每个顶点恰好在 P 的一条路上,则称 P 是 G 的一个路径覆盖. P 中路径可以从 V 的任何一 ...
- 李洪强iOS开发Swift篇—01_简单介绍
李洪强iOS开发Swift篇—01_简单介绍 一.简介 Swift是苹果于2014年WWDC(苹果开发者大会)发布的全新编程语言 Swift在天朝译为“雨燕”,是它的LOGO 是一只燕子,跟Objec ...
- 【Xamarin挖墙脚系列：如何从一个Apk程序转化为Xamarin的程序】
原文:[Xamarin挖墙脚系列:如何从一个Apk程序转化为Xamarin的程序] 工欲善其事必先利其器:工具下载:http://pan.baidu.com/s/1skxjwgH 接下来,我用个小的应 ...
- 在JNI中新开线程遇到问题
08-03 13:39:30.535 1663-20490/system_process E/RfidReaderService﹕ input RDID CARD ID g_data: ...