css3 设计礼品盒

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.cube{/* 固定定位盒子包含框 */position: fixed;left: 50%;top:12px;}.cube.one{top:200px;left:50%;margin-left:-200px;}.cube img{/* 定义礼盒三面的贴图大小 */width:180px;height:180px;}.rightFace,.leftFace,.topFace{position:absolute;}.leftFace {/* 左侧面Y轴倾斜30度 */-webkit-transform:skew(0deg, 30deg);background:#ccc;}.rightFace{　　　　　　　　　　-webkit-transform:skew(0deg,-30deg);background:#ddd;left: 180px;top:0;}.topFace{-webkit-transform:rotate(60deg) skew(0deg,-30deg) scale(1,1.16);top:-142px;left:89px;}.cube{-webkit-transition:-webkit-transform 1s linear;}.cube:hover{ -webkit-transform:translate(202px,115px); }</style>
</head>
<body><div class="cube one"><div class="topFace"><div><img src="img/cat1.jpg" alt=""></div></div><div class="leftFace"><img src="img/cat2.jpg" alt=""></div><div class="rightFace"><img src="img/cat3.jpg" alt=""></div></div>
</body>
</html>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5369772.html

css3 设计礼品盒相关推荐

怎么在html中使logo,如何用CSS3设计腾讯QQ LOGO？
最近用CSS设计LOGO上瘾了,前两天分享了<教你使用纯CSS设计HTML5新LOGO>和<教你使用CSS3设计Opera浏览器LOGO>,今天在微博上看到有新浪的朋友用CSS ...
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se ...
html5设计礼品盒效果,HTML5/CSS3圣诞树和礼盒
CSS 语言: CSSSCSS 确定 body { background: #FFF; } .container { position: absolute; left: 300px; top: 50p ...
html5设计礼品盒效果,十款眼前一亮的包装设计
小时候吃糖果,一定会把糖果纸留着,折成小花绑在灯的开关拉线上,那时候认识了包装设计,后来,再华美的包装都会被弃如敝履,无比忧郁. 1.FJ :哥们,干了这杯咱们再来赌一球俄罗斯设计师 Constan ...
CSS3设计网页阴影特效艺术字
1. 前言利用CSS3新增的text-shadow属性可以生成文本阴影,在HTML文档中实现火焰特效.发光特效.凸起和镶嵌特效.描边特效的艺术字效果,大大提高开发效率,无需链接图片文件,节约带宽. ...
css3魔方3乘3每层旋转_如何使用css3设计出一个立体旋转魔方？
需要先了解的知识: ①了解CSS的2d下的transform变化下的平移(translate)和旋转(rotate). ②了解CSS的3d下的transform变化下的平移和旋转. ③使用transf ...
html5设计礼品盒效果,30个创意包装设计例子
30个创意包装设计例子 5月 31, 2012 评论 (4) Sponsor 产品包装是最常见的平面设计插图,一个好的插图设计除了展示产品相关信息外,还能吸引一些消费者,因为现在很多产品的消费者大多数 ...
html5设计礼品盒效果,十大包装创意设计网站
有时您只需要一些启发.好吧,这是10个包装创意设计网站,这些网站充满了新颖的样品和具有创意的图文信息!花一些时间筛选它们,我们确信您会充满活力,可以重新包装或开始为您的产品选择正确的方向.没有比看看其 ...
简单HTML+CSS3设计——用户信息管理系统
利用HTML+CSS3技术设计一个简单的用户信息管理系统,主要包含框架主页.我的工作台.用户注册.用户信息列表共计四个页面. 一.框架结构二.我的工作台三.用户注册四.用户信息列表源代码:ht ...

css3 设计礼品盒

css3 设计礼品盒相关推荐

最新文章

热门文章