纯CSS实现3 d的案例

　　介绍

这篇文章主要介绍纯CSS实现3 d的案例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

一、正方体

我认为正方体可以算是3 d图像的基础吧,首先正方体是由六个相同的面所组成,其次就需要我们依次构造。(据体构造在代码中)

代码如下:

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞 　　& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比; 　　& lt;元http-equiv=癤-UA-Compatible"内容=癷e=edge"比; 　　& lt; title>正方体& lt;/title> 　　& lt; style> 　　.d3 { 　　身高:300 px; 　　宽度:300 px; 　　角度:800 px; 　　保证金:140 px的汽车; 　　边界:1 px固体# ccc;} 　　.stage { 　　身高:300 px; 　　宽度:300 px; 　　传输格式:preserve-3d; 　　 　　位置:相对; 　　变换:rotateX(45度)rotateY(45度); 　　 　　} 　　.role { 　　身高:300 px; 　　宽度:300 px; 　　位置:绝对的; 　　} 　　.stage { 　　动画:东3 s线性无限;(这是舞台) 　　 　　} 　　.stage:{徘徊 　　动画:暂停; 　　} 　　董@keyframes{(这是使舞台旋转的动画) 　　从{ 　　变换:rotateX(45度)rotateY(45度); 　　} 　　, { 　　变换:rotateX(405度)rotateY(405度); 　　} 　　} 　　.di1{(正方体的前面) 　　背景:rgb(163, 52岁); 　　变换:translateZ (150 px);(沿着z轴向前移动150 px) 　　字体大小:100 px; 　　字体类型:KaiTi; 　　text-align:中心; 　　行高:300 px; 　　} 　　.di2{(正方体的后面) 　　背景:蓝色; 　　变换:translateZ (-150 px) rotateY(180度),(沿着z轴向前移动150 px然后沿着y轴旋转180°*注意顺序哦是先移动后旋转) 　　字体大小:100 px; 　　字体类型:KaiTi; 　　text-align:中心; 　　行高:300 px; 　　} 　　.di3{(正方体的左面) 　　背景:紫色; 　　变换:rotateY(-90度)translateZ (150 px); 　　字体大小:100 px; 　　字体类型:KaiTi; 　　text-align:中心; 　　行高:300 px; 　　} 　　.di4{(正方体的右面) 　　背景:粉色; 　　变换:rotateY(90度)translateZ (150 px); 　　字体大小:100 px; 　　字体类型:KaiTi; 　　text-align:中心; 　　行高:300 px; 　　} 　　.di5{(正方体的上面) 　　背景:红色; 　　变换:rotateX(90度)translateZ (150 px); 　　字体大小:100 px; 　　字体类型:KaiTi; 　　text-align:中心; 　　行高:300 px; 　　} 　　.di6{(正方体的下面) 　　背景:黄色; 　　变换:rotateX(-90度)translateZ (150 px); 　　字体大小:100 px; 　　字体类型:KaiTi; 　　text-align:中心; 　　行高:300 px; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div> 　　& lt; div> 　　(将正方体分为六个相同的面) 　　& lt; div类=敖巧玠i1"祝辞前& lt;/div> 　　& lt; div类=敖巧玠i2"祝辞后& lt;/div> 　　& lt; div类=敖巧玠i3"祝辞左& lt;/div> 　　& lt; div类=敖巧玠i4"祝辞右& lt;/div> 　　& lt; div类=敖巧玠i5"祝辞上& lt;/div> 　　& lt; div类=敖巧玠i6"祝辞下& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　& lt;/body> 　　& lt;/html>

二、动态立体图片册

将图片册设计成立体3 d的效果

利用旋转,移动,倾斜和3 d效果让你的图册更加漂亮。
代码如下:

(将第一张定好位置后将后面的依次排列) 　　& lt; !DOCTYPE html> 　　& lt; html> 　　 　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞 　　& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比; 　　& lt;元http-equiv=癤-UA-Compatible"内容=癷e=edge"比; 　　& lt; title>事例一& lt;/title> 　　& lt; style> 　　身体{ 　　身高:100 vh; 　　} 　　.div { 　　身高:500 px; 　　宽度:800 px; 　　角度:800 px; 　　保证金:50 px汽车; 　　} 　　 　　.div1 { 　　身高:500 px; 　　宽度:800 px; 　　传输格式:preserve-3d; 　　位置:相对;/*变换:rotateY(-10度);*/} 　　.div_0 { 　　身高:400 px; 　　宽度:600 px; 　　位置:绝对的; 　　margin-top: 110 px; 　　margin-left: 50 px; 　　} 　　.div_1 { 　　身高:400 px; 　　宽度:600 px; 　　背景:url (. ./day03/timg.jpg); 　　background-size: 600 px 400 px; 　　border - radius: 20 px; 　　transform-origin:正确的底部; 　　过渡:3 s; 　　} 　　 　　.div_2 { 　　背景:url (. ./day03/timg1.jpg); 　　border - radius: 20 px; 　　background-size: 600 px 400 px; 　　transform-origin:正确的底部; 　　变换:rotateZ(2度)translateZ (-20 px) translateX (20 px) translateY (-20 px); 　　} 　　.div_2:{徘徊 　　变换:rotateZ translateZ (0) (0) translateX translateY (0) (0); 　　过渡:1; 　　} 　　.div_2:徘徊~ .div_1 {/* transform-origin:正确的底部;*/变换:rotateZ(2度)translateZ (20 px) translateX (20 px) translateY (-20 px); 　　过渡:1; 　　}/*身体:悬停.div_1 { 　　透明度:0; 　　过渡:3 s; 　　} */.div_3 { 　　背景:url (timg2.jpg); 　　border - radius: 20 px; 　　background-size: 600 px 400 px; 　　transform-origin:正确的底部; 　　变换:rotateZ(4度)translateZ (-40 px) translateX (40 px) translateY (-40 px); 　　 　　} 　　.div_3:{徘徊 　　变换:rotateZ translateZ (0) (0) translateX translateY (0) (0); 　　过渡:1; 　　} 　　.div_4 { 　　背景:url (timg4.jpg); 　　border - radius: 20 px; 　　background-size: 600 px 400 px; 　　transform-origin:正确的底部; 　　变换:rotateZ(6度)translateZ (-60 px) translateX (60 px) translateY (-60 px); 　　 　　} 　　.div_4:{徘徊 　　变换:rotateZ translateZ (0) (0) translateX translateY (0) (0); 　　过渡:1; 　　} 　　.div_5 { 　　背景:url (timg5.jpg); 　　border - radius: 20 px; 　　background-size: 600 px 400 px; 　　transform-origin:正确的底部; 　　变换:rotateZ(8度)translateZ (-80 px) translateX (80 px) translateY (-80 px); 　　} 　　.div_5:{徘徊 　　变换:rotateZ translateZ (0) (0) translateX translateY (0) (0); 　　过渡:1; 　　} 　　.div_6 { 　　背景:url (timg3.jpg)不再重演; 　　border - radius: 20 px; 　　background-size: 600 px 400 px; 　　transform-origin:正确的底部; 　　变换:rotateZ(10度)translateZ (-100 px) translateX (100 px) translateY (-100 px); 　　} 　　.div_6:{徘徊 　　变换:rotateZ translateZ (0) (0) translateX translateY (0) (0); 　　过渡:1; 　　} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; div> 　　& lt; div> 　　& lt; div类=?null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

纯CSS实现3 d的案例