html5 制作商品显示介绍,HTML5+CSS3:3D展示商品信息示例
强化下perspective和transform:translatez的用法。传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3d元素,~说不定效果不错哈~
效果图:
说明一下:这个创意不是我想的,哈~模仿别人的,创意应该是w3cplus上的。当然了,重点是教大家如何做,就当高仿了~
首先,先教大家利用css3制作一个正方体:
在木有css前,这样的立方体,应该很难制作吧~嗯,我觉得很难~
html:
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:
contact form the easiest way to add a contact form to your shop.
contact form the easiest way to add a contact form to your shop.
contact form the easiest way to add a contact form to your shop.
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;
}
css基本在上面已经分析过了,这里说明一点,我们给没件商品弄了一个div.wapper看似是多余,其实不是,因为我们希望每个商品都是正常的90deg翻转,所以我们不能让所有的商品共享一个舞台,于是我们添加了一个div.wapper让他设置transform-style:preverse-3d,然后每个li分别设置舞台效果perspective。最终翻转效果实在div.wapper上。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。
html5 制作商品显示介绍,HTML5+CSS3:3D展示商品信息示例相关推荐
- HTML5中如何显示视频HTML5视频播放
HTML5 规定了一种通过 video 元素来包含视频的标准方法. 在HTML5中,video元素目前支持三种格式的视频文件, 1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 ...
- php 商品展示html,HTML5和CSS3实现3D展示商品信息的代码
这篇文章介绍的是关于html5商品展示导购特效是一款3D立体样式的商品信息,非常具有实用价值,需要的朋友可以参考下. 强化下perspective和transform:translateZ的用法.传统 ...
- html5 制作风车,[网页设计]html5 requestAnimationFrame制作动画:旋转风车
详细内容请点击 在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...
- HTML5 基础知识,第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值,Canvas 提供的创造性,以及Web storage的离线应用
HTML5 集设计者和开发者于一身,其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application,简称RIA),尤其是富 UI(User ...
- HTML5设计内容,详细介绍HTML5 12个设计小技巧(图文)
这篇文章主要为大家分享了12个不为大家熟知的HTML5设计小技巧,相信大家一定会有所收获,感兴趣的小伙伴们可以参考一下 12个不为大家熟知的HTML5设计小技巧,内容如下 1.交互上,慎用向右滑动的操 ...
- html5图片并排显示图片,HTML5 - 并排显示项目
我是HTML / CSS新手所以我正在创建一个简单的网站来了解它是如何工作的. 我有一个包含网站名称和链接集合的标题.我想格式化它们以便它们并排. (类似于StackExchange,如上所示.左侧的 ...
- 怎么用HTML5制作万花筒,如何用html5写出万花筒效果?
效果图: 代码如下: http://www.baiduyo.com canvas{ background:#ccc; } window.οnlοad=function () { var canvas= ...
- win7支持html5,用Win7+IE9体验HTML5网页游戏的革命
2011年3月,微软推出了全新一代的浏览器:IE9,并很快以出色的性能向用户及对手表明IE9是一 款标准的现代浏览器.正是凭借实打实的性能表现,让用户一改对IE浏览器往日的不佳印象并纷纷将老版本的IE ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...
最新文章
- KDD 2021 即将开幕!当线上 AI 顶会开始内卷.....
- 易捷win10系统电脑卡在“正在关机”界面怎么处理?
- 同一数据库如果处理多个完全不同的业务?
- 1.MVC的工作流程
- 初识Linux——菜鸟篇
- 如何中断JAVA线程
- JAVA学习笔记--类型转换(父类子类 Object 基本类型 String) 拆装箱 包装类
- 【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
- Unity3d访问数据库
- 计算机基础知识整理大全_知识大全 | 物理选修35quot;波粒二象性quot;
- 【系统架构设计师】软考高级职称,一次通过,2017年下半年系统架构设计师考试论文真题(论软件架构风格)
- (转载)linux中编译安装log4cpp
- Thread函数的参数传递和线程所有权转移(2.2)--std::move()
- MapReduce框架下的FP Growth算法详解
- 高可用MySQL:构建健壮的数据中心
- 怎么完全卸载赛门铁克_Symantec卸载方法,赛门铁克卸载
- SOLIDWORKS PDM 2021安装步骤
- java stack top_Java中的堆栈类Stack类 - Break易站
- Google Chrome插件开发-Context Menus
- 如何使用企业微信工作台快速寄件?
热门文章
- oracle求数据关联度,关于数据挖掘关联规则的Oracle实现
- 线性回归用matlab怎么做,matlab中如何应用regress()函数进行线性回归分析?
- linux 系统显示很大,在Linux中可视化显示内存占用情况的方法
- 结构体内嵌比较函数bool operator (const node x) const {}
- BZOJ 4242 水壶(BFS建图+最小生成树+树上倍增)
- 用友U8固定资产总账重算语句
- Mobile Terminal无法使用常用Unix命令
- Android脚本打包
- 根据选择计算Mask值
- HDOJ-1203 I NEED A OFFER!