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

随机推荐

iOS 即时视频和聊天(基于环信)
先上效果图: 屏幕快照 2015-07-30 下午5.19.46.png 说说需求:开发一个可以进行即时视频聊天软件. 最近比较忙,考完试回到公司就要做这个即时通信demo.本来是打算用xmpp协议来 ...
linux上搭建ftp服务器
摘要 vsftpd 是"very secure FTP daemon"的缩写,安全性是它的一个最大的特点.vsftpd 是一个 UNIX 类操作系统上运行的服务器的名字,它可以运行 ...
SQL语言逻辑执行顺序
SQL语言逻辑执行顺序 2012-12-18 16:18:13 分类: 数据库开发技术查询的逻辑执行顺序 FROM < left_table> ON < join_conditio ...
linux快速清空文件比如log日志
linux中快速清空文件内容的几种方法这篇文章主要介绍了linux中快速清空文件内容的几种方法,需要的朋友可以参考下权限要求: 至少执行用户对该文件有写的权限 --w------- 1 QA_Dep ...
对比Cassandra、 Mongodb、CouchDB、Redis、Riak、 Membase、Neo4j、HBase
转自:http://www.cnblogs.com/alephsoul-alephsoul/archive/2013/04/26/3044630.html 导读:Kristóf Kovács 是一位软 ...
OkHttp上传文件，服务器端请求解析找不到文件信息的问题
长话短说,不深入解释了,官方给的上传案例代码: private static final String IMGUR_CLIENT_ID = "..."; private stati ...
Unity3d Mecanim动画系统Animator学习笔记
1. unity3d Mecanim学习 Unity3d新版动画系统网上的介绍很多,但多是流水笔记,外人很难看明白,后来我终于找到介绍的比较明白的两个作者,特别感谢.一个是58开发网的乐天老师,课 ...
linux CentOS6.5 yum安装mysql 5.6
1.新开的云服务器,需要检测系统是否自带安装mysql # yum list installed | grep mysql 2.如果发现有系统自带mysql,果断这么干 # yum -y remove ...
让程序跳转到绝对地址0x100000去执行
网上比较火的一个题,让程序跳转到绝对地址去执行 :可以的实现方式为: ( (void(*)())0x4110e6)(); (*(void(*)())0x4110e6)(); (*((void(*)() ...
使用float属性的一些小技巧
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPwAAACJCAIAAACHJsJCAAAKUUlEQVR4nO2dTY8cxRnHd73LLsusDd ...

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

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

随机推荐

热门专题

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

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