HTML5 CSS3 专题：诱人的实例 3D展示商品信息

强化下perspective和transform:translateZ的用法。传统的商品展示或许并不能很好的吸引用户的注意力，但是如果在展示中添加适当的3D元素，~说不定效果不错哈~

效果图：

说明一下：这个创意不是我想的，哈~模仿别人的，创意应该是w3cplus上的。当然了，重点是教大家如何做，就当高仿了~

首先，先教大家利用CSS3制作一个正方体：

在木有CSS前，这样的立方体，应该很难制作吧~嗯，我觉得很难~

html:

<body>

<div class="wapper">

    <div class="cube">

        <div class="side  front">1</div>

        <div class="side   back">6</div>

        <div class="side  right">4</div>

        <div class="side   left">3</div>

        <div class="side    top">5</div>

        <div class="side bottom">2</div>

    </div>

</div>

</body>

wapper为此效果的舞台，即设置perspective的元素，如果多个元素共享一个舞台，那么从一个视线观察所以的元素的效果是不一样的，就相当我们正常情况下，站在一排倾斜成45度的门前面，每个门对于我们视线来说，角度是不同的；div#cube代表一个立方体，然后6个DIV分别代表每个面。

div#cube设置transform-style:preserve-3d，然后每个元素设置rotate和translateZ

现在所有的面重叠在同一个平面上，我们分别让：

font往前即Z轴方向移动半个边长（translateZ(50px)）的距离即50px；

back先绕Y轴旋转180度，这样让字体是对外的，然后translateZ(50px)，因为此时已经旋转了180度，所以tanslateZ是向下的，

同理，其他面分别绕X轴或者Y轴旋转90度，然后translateZ(50px)

CSS：

 .wapper

        {

            margin: 100px auto 0;

            width: 100px;

            height: 100px;

            -webkit-perspective: 1200px;

            font-size: 50px;

            font-weight: bold;

            color: #fff;

        }

        .cube

        {

            position: relative;

            width: 100px;

            -webkit-transform: rotateX(-40deg) rotateY(32deg);

            -webkit-transform-style: preserve-3d;

        }

        .side

        {

            text-align: center;

            line-height: 100px;

            width: 100px;

            height: 100px;

            background: rgba(255, 99, 71, 0.6);

            border: 1px solid rgba(0, 0, 0, 0.5);

            position: absolute;

        }

        .front

        {

            -webkit-transform: translateZ(50px);

        }

        .top

        {

            -webkit-transform: rotateX(90deg) translateZ(50px);

        }

        .right

        {

            -webkit-transform: rotateY(90deg) translateZ(50px);

        }

        .left

        {

            -webkit-transform: rotateY(-90deg) translateZ(50px);

        }

        .bottom

        {

            -webkit-transform: rotateX(-90deg) translateZ(50px);

        }

        .back

        {

            -webkit-transform: rotateY(-180deg) translateZ(50px);

        }

对于显示效果，可以调节perspective的距离~

好了，立方体理解了，那么这个商品展示就没什么难度了；两个DIV分别代表两个面，一个是图片，一个是介绍，初始时，介绍绕X轴先旋转90deg，然后当鼠标移动时，将整个盒子绕x轴旋转90deg即可。

HTML:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <link href="css/reset.css" rel="stylesheet" type="text/css">

</head>

<body>

<ul id="content">

    <li>

        <div class="wrapper">

            <img src="images/a.png">

            <span class="information">

              <strong>Contact Form</strong> The easiest way to add a contact form to your shop.

            </span>

        </div>

    </li>

    <li>

        <div class="wrapper">

            <img src="images/b.jpeg">

            <span class="information">

              <strong>Contact Form</strong> The easiest way to add a contact form to your shop.

            </span>

        </div>

    </li>

    <li>

        <div class="wrapper">

            <img src="images/c.png">

            <span class="information">

              <strong>Contact Form</strong> The easiest way to add a contact form to your shop.

            </span>

        </div>

    </li>

</ul>

</body>

</html>

CSS：

<style type="text/css">

        body

        {

            font-family: Tahoma, Arial;

        }

        #content

        {

            margin: 100px auto 0;

        }

        #content li, #content .wrapper, #content li img, #content li span

        {

            width: 310px;

            height: 100px;

        }

        #content li

        {

            cursor: pointer;

            -webkit-perspective: 4000px;

            width: 310px;

            height: 100px;

            float: left;

            margin-left: 60px;

            /*box-shadow: 2px 2px 5px #888888;*/

        }

        #content .wrapper

        {

            position: relative;

            -webkit-transform-style: preserve-3d;

            -webkit-transition: -webkit-transform .6s;

        }

        #content li img

        {

            top: 0;

            border-radius: 3px;

            box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);

            position: absolute;

            -webkit-transform: translateZ(50px);

            -webkit-transition: all .6s;

        }

        #content  li span

        {

            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(236, 241, 244, 1)), color-stop(100%, rgba(190, 202, 217, 1)));

            text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);

            position: absolute;

            -webkit-transform: rotateX(-90deg) translateZ(50px);

            -webkit-transition: all .6s;

            display: block;

            top: 0;

            text-align: left;

            border-radius: 15px;

            font-size: 12px;

            padding: 10px;

            width: 290px;

            height: 80px;

            text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);

            box-shadow: none;

        }

        #content li span strong

        {

            display: block;

            margin: .2em 0 .5em 0;

            font-size: 20px;

            font-family: "Oleo Script";

        }

        #content li:hover .wrapper

        {

            -webkit-transform: rotateX(95deg);

        }

        #content li:hover img

        {

            box-shadow: none;

            border-radius: 15px;

        }

        #content li:hover span

        {

            box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);

            border-radius: 3px;

        }

    </style>

CSS基本在上面已经分析过了，这里说明一点，我们给没件商品弄了一个div.wapper看似是多余，其实不是，因为我们希望每个商品都是正常的90deg翻转，所以我们不能让所有的商品共享一个舞台，于是我们添加了一个div.wapper让他设置transform-style：preverse-3d，然后每个li分别设置舞台效果perspective。最终翻转效果实在div.wapper上。

好了，相信这几个例子，大家已经可以很好的使用perspective和translateZ创造一些很炫的立体效果，欢迎各位指点~

源码点击下载

HTML5 CSS3 专题：诱人的实例 3D展示商品信息的更多相关文章

HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...
HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相册
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
HTML5 CSS3 专题 : 拖放（Drag and Drop）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31413767 本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍 ...
HTML5 CSS3专题纯CSS打造相冊效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...
HTML5 CSS3专题纯CSS打造相册效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...
html5+css3 微信开发-学习实例
例子1.控制数据只显示两行并且最后使用省略号样式如下: .ControlDataRows{ overflow : hidden; text-overflow: ellipsis; display: ...
通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
常常听到人们对于HTML5的讨论,看了页面头部这个那个就是Html5,误认为HTML5只是新增些标签“而已”,学完了W3School似乎就理解了.实际上很多从业人员并没有深入理解业界为什么要推出HTM ...

随机推荐

SharePoint 2007 文档库中的文档添加评论功能
背景:接到一个项目,要求文档管理,当然文档库就可以了,但是要求文档需要大家去读,读完以后还可以发表评论,这Moss貌似就有点困难了.和同事一起合计,想来想去也没有太好的办法,后来想到传统开发,两个表的 ...
asp.net core选项配置的研究
asp.net-core选项模块是全新,可拓展的框架,其作用在整个.net-core框架中,就像依赖注入一样无处不在,是一个很重要的组件. 其实配置模块与选项模块是紧密相连的,我们可以使用Config ...
HTML中<base>标签的正确使用
HTML <base> 标签 1. 定义:<base> 标签是 HTML 语言中的基准网址标记,是一个单标签. 2. 作用:规定页面上所有链接的默认 URL 和默认目标. ...
《转》Xcode 6 正式版如何创建一个Empty Application
Xcode 6 正式版里面没有Empty Application这个模板,这对于习惯了纯代码编写UI界面的程序员来说很不习惯. 有网友给出了一个解决方法是,把Xcode 6 beta版里面的模板复制过 ...
Python的lambda
if else 可以用简单的三元运算符表示 if 1 == 1: name = 'wupeiqi' else: name = 'alex' --> name = 'wupeiqi' if 1 = ...
Spring 框架的优点及缺点
首先Spring 是一个框架,使用Spring并不代表代码质量的提高,就像盖房子选择用上海的地皮还是北京的地皮一样,房子质量与土地所在的城市无关,与房子的具体设计方案和选料有关. 使用Spring 等 ...
安装Emacs并设置racket环境
最近在阅读sicp这本书,书中的代码是使用scheme实现的.之前阅读的时候是使用Dr.Racket来完成写练习的,可我觉得与其这样,不如一步到位,使用emacs+lisp解释器来的比较快. 安装em ...
实例解析Collections源码，Iterator和ListIterator
比如一个视频或文章有多个页面标签设置,我们在看一篇文章或一个视频时,底部有为你推荐栏目. 如何根据这个文章或视频的标签,来实现这个推荐栏目呢. public List<VideoInfoVo&g ...
Linux中mongodb定时远程备份
下载mongodb https://www.cnblogs.com/tartis/p/5291580.html mongodb定时备份文档虚拟机报错要改BIOS 虚拟技术开启进入root账户 s ...
架构之CDN缓存
CDN缓存 CDN主要解决将数据缓存到离用户最近的位置,一般缓存静态资源文件(页面,脚本,图片,视频,文件等).国内网络异常复杂,跨运营商的网络访问会很慢.为了解决跨运营商或各地用户访问问题,可以在重 ...

HTML5 CSS3 专题 ：诱人的实例 3D展示商品信息

HTML5 CSS3 专题 ：诱人的实例 3D展示商品信息的更多相关文章

随机推荐

热门专题

HTML5 CSS3 专题：诱人的实例 3D展示商品信息

HTML5 CSS3 专题：诱人的实例 3D展示商品信息的更多相关文章