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

随机推荐

BT币（金融有风险，投资需谨慎）哥的失败投资
谁都知道bt币是一个旁氏骗局, 而进去的人,就必须保证自己不赔钱,所以只能随着大潮往前走,谁也不能让它跌压垮骆驼的最后一根稻草, 还是幕后有个推手, 在炒作 BT币, 事实上,作为新的投资项目,B ...
java的io库用到的装饰模式是如何体现的?
概论 java的io包下大概有85个类,真复杂.其实不然这些类又可以分为以下四个部分. 输入流输出流字节流 InputStream ...
leetCode(66)-Excel Sheet Column Title
题目: Given a positive integer, return its corresponding column title as appear in an Excel sheet. For ...
amaze UI 如何添加原生表单验证
这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证在amaze ui官网找到表单验证. 但是ama ...
SVN中与资源库同步时报告了错误。1 中的 0 个资源已经同步
SVN中与资源库同步时报告了错误.1 中的 0 个资源已经同步原因: 文件被lock, 此时再次提交则出错,解决办法就是clean释放锁即可再次提交: 解决方案: 右键项目–>team–> ...
Ubuntu下定时任务和自启动任务的部署
1.定时任务的部署,最简单的方法是执行 crontab -e 然后在下面加上世间周期配置和要执行的命令,一般情况下,可以把要执行的任务用bash脚本封装一下,格式如下所示: minute hour ...
js如何读写txt文件？（曲线救国篇）
.emmm,不存在的.做不到的. 但是,你可以继续往下阅读,或许能实现你想要的功能. 前言:一般我们需要用js来实现文件读写,都是一些比较小的,离线的应用(因为如果可以联网,什么json什么db都任意 ...
JDK AtomicInteger 源码分析
@(JDK)[AtomicInteger] JDK AtomicInteger 源码分析 Unsafe 实例化 Unsafe在创建实例的时候,不能仅仅通过new Unsafe()或者Unsafe.ge ...
Kudu vs HBase
本文由网易云发布. 背景 Cloudera在2016年发布了新型的分布式存储系统--kudu,kudu目前也是apache下面的开源项目.Hadoop生态圈中的技术繁多,HDFS作为底层数据存储的 ...
ImportError: numpy.core.multiarray failed to import
1. ImportError: numpy.core.multiarray failed to import pip install -U numpy http://stackoverflow.com ...

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

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

随机推荐

热门专题

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

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