欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

HTML5和CSS3达成3D展示产品信息的代码

企业模板

  第一,先教大伙借助CSS3制作一个正方体:

  在木有CSS前,如此的立方体,应该非常难制作吧——嗯,我感觉非常难——

  html:

  wapper为此成效的舞台,即设置perspective的元素,假如多个元素共享一个舞台,那样从一个视线察看所以的元素的成效是不同的,就相当大家正常状况下,站在一排倾斜成45度的门前面,每一个门对于大家视线来讲,角度是不一样的;p#cube代表一个立方体,然后6个p分别代表每一个面。

  p#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:

  对于显示成效,可以调节perspective的距离——

  好了,立方体理解了,那样这个产品展示就没什么困难程度了;两个p分别代表两个面,一个是图片,一个是介绍,初始时,介绍绕X轴先旋转90deg,然后当鼠标移动时,将整个盒子绕x轴旋转90deg即可。

  HTML:

  CSS:

  CSS基本在上面已经剖析过了,这里说明一点,大家给没件产品弄了一个p.wapper看上去是多余,其实不是,由于大家期望每一个产品都是正常的90deg翻转,所以大家不可以让所有些产品共享一个舞台,于是大家添加了一个p.wapper让他设置transform-style:preverse-3d,然后每一个li分别设置舞台成效perspective。最后翻转成效实在p.wapper上。

  以上就是本文的全部内容,期望对大伙的学习有所帮,更多有关内容请关注jquery中文网!

  有关推荐:

  CSS3三维变形达成立体方块

  CSS 用Sprites技术达成圆角的成效

  以上就是HTML5和CSS3达成3D展示产品信息的代码的详细内容,更多请关注jQuery中文网其它有关文章!

  你可能有兴趣的文章:

  HTML5和CSS3达成3D展示产品信息的代码

  H5 C3怎么样展示3D成效的产品信息

  html5 details标签有哪些用途是什么?<details>标签怎么使用介绍(附用实例)

  用PHP和HTML5 FormData达成无刷新文件上传

  php在线商城购物车代码一例

  借助HTML5中的Canvas绘制笑脸的代码

  基于HTML5 WebGL达成的3D机房

  photoshop工业级电影调色让相机照片秒变银幕大片成效课程

  HTML5必念书籍

  H5可以用来做什么?

  这篇文章主要介绍了关于HTML5用DOM进行自概念控制,有着肯定的参考价值,目前推荐给大伙,有需要的朋友可以参考一下

  HTML5的video虽然可用controls来展示控件,并进行控制播放中止等,但不一样的浏览器显示的成效可能不同,下面与大伙推荐下用Dom来进行自概念的一些操作和控制

  HTML5的video虽然可用controls来展示控件,并进行控制播放中止等,但不一样的浏览器显示的成效可能不同,所以有时候大家需要用Dom来进行自概念的一些操作和控制。下面是一个小例子。

  当然成效不是非常美观,若想漂亮的可以自己设置css样式等。

  应该注意的是在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。

  在视频的元数据已加载后,其他属性才可用。


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.nsxcb.cn 关注: 时间:2022-05-13 18:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/HTML/HTMLrumen/20220513/14191.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧