CSS3 3D立体旋转

　

css3旋转

用到的知识点

• 最重要的一个属性
• transform-style:flat|preserve-3d;该属性默认值为 flat。
• 当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时，容器的子元素便会相对父元素所在平面进行3D变换。
• 位移操作： translateX(length) 、translateY(length) 、 translateZ(length)，length可正可负，同时位移操作可简写为translate(Xlength,Ylength,Zlength);
• 旋转操作：rotateX(angle) 、rotateY(angle) 、rotateZ(angle) ，angle同样可正可负，可简写为rotate(Xangle,Yangle,Zangle);
• 透明度：可通过transparent或opacity属性设置。

操作步骤

• 准备用一个父盒子包裹六个子盒子，如图

  

• 让子盒子绝对定位，此时我们肉眼可见的只有一个

  

• 为父盒子设置如下属性，得到如图变换

 transform-style:preserve-3d;
 transform: rotateX(-33.5deg) rotateY(45deg);

• 对子元素进行位移以及旋转变换得到正方体，为了清晰我们为子元素添加了透明度

  

• 设置border- radiOS它还可以变成这样（hhhh）

  

• 接下来便要编写animation动画。此步骤请自行学习 W3C CSS动画

源代码

[github]源代码(https://github.com/zyg1999/Web/blob/master/3 d rotation.html)

相关阅读

windows 安装cab文件

下载所需要的cab补丁文件 打开cmd（管理员模式）， 运行dism /online /add-package /packagepath:补丁路径。 等待完成即可

User Parameter UI2WD_TRKORR_CUST is not maintained

Created by Jerry Wang, last modified on Mar 11, 2015 Issue: You meet with the following error message in Fiori UI:You ca

ADO.NET简介

微软数据访问方式历史阶段1，ODBC （Open Database Connectivity）是第一个使用SQL访问不同关系数据库的数据访问技术。使用ODBC应用程

OpenGL2.0 和 OpenGL3.0 的不同与共同点

OpenGL2.0 和 OpenGL3.0 的不同与共同点在OpenGL2.0中vertex shader 中 可以不指定 version 如果不指定 version 对于iOS来说

m3u8简介

原文地址： https://www.cnblogs.com/pukaifei/p/8312936.html [多媒体] m3u8简介 m3u8简介 简介：https://www.jianshu.com/p/42