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

随机推荐

数据结构---队列C语言实现
#include <stdio.h> #include <stdlib.h> //队列大小 #define SIZE 1024 static int queue[SIZE] = ...
obj-c编程16:键值编码(KVC)
我们可以借助obj-c中的键值编码(以后简称KVC,Key-Value Coding)来存取类的属性,通过指定所要访问的属性名字符串标示符,可以使用存取器方法来获取或设置类的属性.下面的例子,借助于K ...
C# 如何将PDF转为多种图像文件格式（Png/Bmp/Emf/Tiff）
PDF是一种在我们日常工作学习中最常用到的文档格式之一,但常常也会因为文档的不易编辑的特点,在遇到需要编辑PDF文档内容或者转换文件格式的情况时让人苦恼.通常对于开发者而言,可选择通过使用组件的方式来 ...
javaScript(6)---流程控制语句
学习要点: 1.语句的定义 2.if 语句 3.switch语句 4.do...while语句 5.while语句 6.for语句 7.for...in语句 8.break和continue语句 9. ...
win8 JDK环境变量不生效
执行where java 看一下路径对不对,如果对的话就把system32下面的3个java相关的exe删了即可,如果路径不对就修改环境变量.
Mybatis 系列3
系列文章 2 中,我们通过对mybatis源码的简单分析,可看出,在mybatis配置文件中,在configuration根节点下面,可配置properties.typeAliases.plugins ...
SOFA 源码分析 — 链路数据透传
前言 SOFA-RPC 支持数据链路透传功能,官方解释: 链路数据透传功能支持应用向调用上下文中存放数据,达到整个链路上的应用都可以操作该数据. 使用方式如下,可分别向链路的 request 和 re ...
转载 Elasticsearch开发环境搭建（Eclipse\MyEclipse + Maven）
概要: 1.使用Eclipse搭建Elasticsearch详情参考下面链接 2.Java Elasticsearch 配置 3.ElasticSearch Java Api(一) -添加数据创建索引 ...
Html5的表单元素
表单是HTML中获取用户输入的手段,,对于web应用系统及其重要,文字是不能说明问题的: 直接上代码把: <!DOCTYPE html><html lang="en&quo ...
mysql 基础语法掌握~ This is just the beginning.
create database 数据库名; drop database 数据库名; use 数据库名; create table table_name ( column_name, column_ty ...

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

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

随机推荐

热门专题

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

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