文档章节

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

 冷小菜
发布于 2014/12/13 14:06
字数 1093
阅读 15
收藏 0

强化下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创造一些很炫的立体效果,欢迎各位指点~


源码点击下载


本文转载自:http://blog.csdn.net/lmj623565791/article/details/32974051

粉丝 2
博文 63
码字总数 0
作品 0
海淀
私信 提问
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
380
0
8款炫酷的HTML5特效源码

HTML5的强大不仅在于可以让网页元素更加灵活多变,更在于它可以很方便的实现网页动画的特效,可以让你的网站更加富有现代化特色。今天,就给大家分享8个让人难忘的HTML5炫酷动画~ 1、HTML5 C...

牵着蜗牛去西藏
2015/02/09
4.6K
1
8 款别具一格的 jQuery/HTML5 插件

这两年HTML5发展得越来越成熟,许多基于HTML5的应用也日益增多,jQuery又是前段开发利器,jQuery结合HTML5自然能够设计出非常棒的产品,本文介绍8款别具一格的jQuery/HTML5应用插件。 1、HTM...

yykj
2013/11/01
1K
0
分享5个实用而且美观的CSS3实例

对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了 更多的选择。 用纯CSS也可以实现各种各样很酷的效果了,甚...

小编辑
2010/06/29
865
3
大爱HTML5 9款超炫HTML5最新动画源码

我们分享过很多漂亮的HTML5动画,包括CSS3菜单、HTML5 Canvas动画等。今天我们精选了9款非常不错的超炫HTML5最新动画及其源码,一起来看看。 1、HTML5可爱的404页面动画 很逗的机器人 很久以...

ruby_chen
2014/04/02
5.5K
5

没有更多内容

加载失败,请刷新页面

加载更多

Java FOR-EACH循环

FOR-EACH循环使得代码更加的简短,也让代码更加易懂,其实他并没有加入什么新的功能。他的功能完全可以用简单的FOR循环代替。 for-each的用法: int a[] = {1,2,3,4,5,6} for(int s:a){ Syst...

无名氏的程序员
10分钟前
2
0
使用HTML5的History API

本文转载于:专业的前端网站➣使用HTML5的History API   HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用,例如通过一段JavaScript代...

前端老手
12分钟前
2
0
JAVA 编写redisUtils工具类,防止高并发获取缓存出现并发问题

import lombok.extern.slf4j.Slf4j;import org.springframework.data.redis.core.BoundHashOperations;import org.springframework.data.redis.core.BoundValueOperations;import org.......

huangkejie
53分钟前
7
0
JMM内存模型(一)&volatile关键字的可见性

在说这个之前,我想先说一下计算机的内存模型: CPU在执行的时候,肯定要有数据,而数据在内存中放着呢,这里的内存就是计算机的物理内存,刚开始还好,但是随着技术的发展,CPU处理的速度越...

走向人生巅峰的大路
今天
98
0
你对AJAX认知有多少(2)?

接着昨日内容,我们几天继续探讨ajax的相关知识点 提到ajax下面几个问题又是必须要了解的啦~~~ 8、在浏览器端如何得到服务器端响应的XML数据。 通过XMLHttpRequest对象的responseXMl属性 9、 ...

理性思考
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部