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

随机推荐

objective-c如何在linux下进入Modern模式
自从apple的obj-c进入2.0后,出现了相对于Legacy模式的Modern模式:Modern模式中出现了一些高级功能(比如ARC),并且出现了一些新的字面语法,新旧模式的差别可以参考apple ...
$cordovaCamera 插件上传头像图片功能
首先要注入 $cordovaCamera 使用相机拍照 var useCamera = function() { var options = { //这些参数可能要配合着使用,比如选择了source ...
TensorFlow学习记录（一）
windows下的安装: 首先访问https://storage.googleapis.com/tensorflow/ 找到对应操作系统下,对应python版本,对应python位数的whl,下载. ...
chart 目录结构 - 每天5分钟玩转 Docker 容器技术（164）
chart 是 Helm 的应用打包格式.chart 由一系列文件组成,这些文件描述了 Kubernetes 部署应用时所需要的资源,比如 Service.Deployment.PersistentV ...
(转） windows下安装 rabbitMQ 及操作常用命令
该博客转载自:https://blog.csdn.net/gy__my/article/details/78295943 原作者:Eric Li 出处:http://www.cnblogs.com/ ...
Centos 如何发布Java项目
在发布Java项目之前,我们先要安装如下软件一.Windows 1.winscp(Windows到centos上传下载) 2.PuTTY(Windows访问centos服务器) 3.Navicat客 ...
Angular教程测试运行过程中产生的一些问题
主要问题就是最后一个HTTP Demo需要angular-in-memory-web-api模块: TS2307:Cannot find module 'angular-in-memory-web-a ...
linux常用命令合集(未完)
(1)新建新建文件夹:mkdir 文件夹名新建文件:touch 文件路径/文件名删除: rm –f filename删除文件 rm –rf filename删除文件夹 (2)重命名 1将一个名为 ...
iview源码解析（1）
概述公司技术栈开始用vue主导开发,但因为公司前端会vue的不多所以在项目中用到vue的技术不是很深,之前出去面试被接连打击,而且本来打算开始为公司vue的项目构建自己的组件库所以去下载了iview ...
removeElement
Description: Given an array and a value, remove all instances of that value in place and return the ...

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

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

随机推荐

热门专题

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

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