HTML5如何在网页中实现3D效果
CSS3不仅为开发者提供了二维变形，还将动画从二维平面推送到三维状态，可以实现真正的三维特效。
像2D变形，三维变形使用变换属性。触发三维变形有两种方式:一种是通过语法告诉浏览器“请使用三维变形”，另一种是直接使用CSS3三维变形的语法。
触发方式一:告诉浏览器如何变形。
-webkit-transform-style:preserve-3d;
温馨提示:IE不支持三维变形。在移动端，大部分浏览器都是WebKit内核，所以你需要在这段代码前写前缀内核-webkit-。
提示:不要为body元素设置-WebKit-Transform-Style:preserve 3d，否则会影响由position:fixed定位的元素的布局。在开发过程中，如果当前元素属于body的子元素，并且想要应用3D变形，可以在body和当前元素之间再嵌套一层结构，对这一层元素应用3D变形。
触发方式二:直接使用CSS3变形语法。
<!DOCTYPE html>
& lthead & gt
& ltmeta charset = & quotUTF-8 & quot；& gt
& lttitle & gt颜科技/title >:
& ltstyle & gt
. box1 {
宽度:150px
高度:150px
边框:2px纯蓝；
}
. box1 div
高度:150px
背景:rgba(0，0，0，0.5)；
-WebKit-transform:translate 3d(30px，60px，20px)rotateX(30 deg)；
transform: translate3d(30px，60px，20px)rotateX(30 deg)；
}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv class = & quot方框& quot& gt
& ltdiv & gt& lt/div & gt；
& lt/div & gt；
& lt/body & gt；
& lt/html & gt；
三维变形的具体属性详见CSS3-3D相关知识详解-透视与变形方向。
3D效果制作
要求
做一个立方体并旋转它。
代码实例
<!DOCTYPE HTML>
& lthtml & gt
& lthead & gt
& ltmeta charset = & quotutf-8 & quot；/& gt；
& lttitle & gt颜科技
& ltlink rel = & quot样式表& quottype = & quottext/CSS & quot；href = & quothttps://css.h5course.cn/reset-1.0.0.css"/>；
& ltstyle & gt
.main-BAC {-WebKit-perspective:1500；}/*设置透视距离*/
.主要{
宽度:200px
高度:200px
边距:0自动；
位置:相对；
-WebKit-transform-style:preserve-3d；
-WebKit-transition:-WebKit-transform 2s ease 0s；/*过渡时间*/
}
/*基本风格*/
.主页面{
位置:绝对；
边距:0；
填充:0；
宽度:200px
高度:200px
文本对齐:居中；
行高:200像素；
字体大小:26px
不透明度:0.5；
}
/*将第一个元素Z轴向前移动100px，形成第一个面(正面)*/
.主p:第n种类型(1) {
背景色:红色；
-WebKit-transform:translate z(100px)；
}
/*将第一个元素的Z轴向前移动100px，并围绕X轴旋转90度，以形成上表面*/
.主p:第n种类型(2) {
背景色:橙色；
-WebKit-transform:rotateX(90 deg)translate z(100 px)；
}
/*将第一个元素的Z轴向前移动100px，并围绕X轴旋转-90度，以形成下表面*/
.主p:第n种类型(3) {
背景色:黄色；
-WebKit-transform:rotateX(-90 deg)translate z(100px)；
}
/*将第一个元素的Z轴向前移动100px，绕Y轴旋转90度，形成右侧面*/
.主p:第n种类型(4) {
背景色:绿色；
-WebKit-transform:rotateY(90 deg)translate z(100 px)；
}
/*将第一个元素的Z轴向前移动100px，并围绕Y轴旋转-90度以形成左侧面*/
.主p:第n种类型(5) {
背景色:# b 435 BF；
-WebKit-transform:rotateY(-90 deg)translate z(100px)；
}
/*将第一个元素的Z轴向前移动100px，并围绕Y轴旋转180度，形成背面(back) */
.主p:第n种类型(6) {
背景色:蓝色；
-WebKit-transform:rotateY(180 deg)translate z(100px)；
}
/*鼠标向内移动时，绕Y轴旋转180度，绕Z轴旋转180度*/
.main:hover {-WebKit-transform:rotateY(180 deg)rotateZ(180 deg)；}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv class = & quot主-BAC & quot；& gt
& ltdiv class = & quot主& quot& gt
& ltp & gt颜科技
& ltp & gt三维立方体
& ltp & gtHTML5学校
& ltp & gt三维立方体
& ltp & gt代码制作者
& ltp & gtJavaScript & lt/p & gt；
& lt/div & gt；
& lt/div & gt；
& lt/body & gt；
& lt/html & gt；
代码分析
当鼠标移入时，立方体逐渐旋转(无突变)，绕X轴旋转45度，绕Y轴旋转45度。
当鼠标移出立方体时，立方体返回到其初始状态。在初始状态下，我们没有采用无限视角，设置了一定的视角，这样当我们一开始直视立方体时，就不会觉得它是一个平面。
3D效果制作-目标效果图
以上来源:HTML5布局之路
支付宝扫一扫
微信扫一扫
