css中实现3 d效果的示例

　　介绍

小编给大家分享一下css中实现3 d效果的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

css中的3 d效果

具体代码:

,& lt; ! DOCTYPE  html>, 2, 　　,& lt; html> 3, & lt; head>, 4,,,,, 　　,& lt; meta  charset=癠TF-8"祝辞,5,,,,, 　　,& lt; title> ITandYT, 6,,,,, 　　,& lt; style 类型=拔谋?css"祝辞,7,,,,,,,,, 　　,#箱{8,,,,,,,,,,,,,宽度:,200 px;, 9,,,,,,,,,,,,, 　　,身高:200 px; 10,,,,,,,,,,,,,保证金:,200 px 汽车;11,,,,,,,,,,,,, 　　,位置:相对;12,13,,,,,,,,,,,,,/*给父级设置3 d空间14 */,,,,,,,,,,,,, 　　,传输格式:preserve-3d; 15,,,,,,,,,,,,,/*设置景深*/16,,,,,,,,,,,,, 　　,/*视角:800 px; */17,,,,,,,,,,,,, 　　,变换:角度(8000 px), rotateY(-60度),rotateX(30度),18岁,,,,,,,,,},,,,,,,,, 　　,# box  div{21,,,,,,,,,,,,,宽度:,100%;22,,,,,,,,,,,,,身高:,100%;23,,,,,,,,,,,,, 　　,边界:1 px  solid 黑色;24,,,,,,,,,,,,,位置:,绝对的,25岁,,,,,,,,,,,,, 　　,使用:0.7;26个,,,,,,,,,}27,,,,,,,,,/*前面*/28,,,,,,,,, 　　,# box  div: nth-child(1){29岁,,,,,,,,,,,,,背景:,苍绿色,30,,,,,,,,,,,,, 　　,变换:translateZ (100 px); 31日,,,,,,,,,32},,,,,,,,,/*后面33 */,,,,,,,,, 　　,# box  div: nth-child(2){34个,,,,,,,,,,,,,背景:,浅紫红,35岁,,,,,,,,,,,,, 　　,变换:translateZ (-100 px); 36,,,,,,,,,} 37个,,,,,,,,,/*左面38 */,,,,,,,,, 　　,# box  div: nth-child(3){39岁,,,,,,,,,,,,,背景:,李子,40岁,,,,,,,,,,,, 　　,变换:translateX (-100 px), rotateY(90度),41岁,,,,,,,,,}42个,,,,,,,,,/*右面43 */,,,,,,,,, 　　,# box  div: nth-child(4){44岁,,,,,,,,,,,,,背景:,秘鲁,45岁,,,,,,,,,,,,, 　　,变换:translateX (100 px), rotateY(90度),46岁,,,,,,,,,}47个,,,,,,,,,/*上面*/48个,,,,,,,,, 　　,# box  div: nth-child(5){49,,,,,,,,,,,,,背景:,淡菊黄色;50,,,,,,,,,,,,, 　　,变换:translateY (-100 px), rotateX(90度),51岁,,,,,,,,,}52岁,,,,,,,,,/*下面*/53个,,,,,,,,, 　　,# box  div: nth-child(6){54岁,,,,,,,,,,,,,背景:,苍白的宝石绿,55岁,,,,,,,,,,,,, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

css中实现3 d效果的示例