使用css3 3d制作一个运动的3d盒子

 时间:2024-10-15 05:24:21

等了这么久,牛lan器大户某60发布8.0beta版后终于开始支持css3d了。本文主要讲的是如何使用css3 的3d属性制作一个的3d盒子模型。再也不需要2d那样借助各种算斜切角旋转角了。只需要几句代码轻松搞定。css3 3d盒子可以用在商品的立体展示等方面。

工具/原料

支持css3 3d的牛lan器(防和谐)。

jquery-1.11.1.js

基础知识

1、一、首先先了解css3d的坐标系构成。x轴方向是从浏览器左上角开始往右边增大,y轴方向是从浏览器左上角往下边增大。z轴方向是垂直于屏幕平面往屏幕前面增大。如下图

使用css3 3d制作一个运动的3d盒子使用css3 3d制作一个运动的3d盒子

2、接着给父元素类box和子元素类face添加上基本的样式。父元素和子元素都是宽高为200px的正方形,子元素相对于父元素绝对定位都重叠在一起。

使用css3 3d制作一个运动的3d盒子使用css3 3d制作一个运动的3d盒子使用css3 3d制作一个运动的3d盒子使用css3 3d制作一个运动的3d盒子使用css3 3d制作一个运动的3d盒子使用css3 3d制作一个运动的3d盒子使用css3 3d制作一个运动的3d盒子使用css3 3d制作一个运动的3d盒子使用css3 3d制作一个运动的3d盒子

11、要使正方体动起来只要对父元素.box添加transform效果就可以了。比如可以制作一个使用鼠标旋转查看各个面的720度产品展示盒,请关注后续的百度经验。

  • 墨刀中怎么将项目加密后分享
  • Adobe国际认证,利用InDesign制作传单教程?
  • Axure元件怎么任意更改形状
  • 墨刀如何制作轮播图
  • Axure RP怎样快速批量删除参考线
  • 热门搜索
    小学生知识竞赛 beloved什么意思 锤子什么意思 玉器知识 乐理知识入门 物是人非事事休什么意思 什么是偏光太阳镜 智慧运动场 大蒜的功效与作用 说明文文体知识