html+CSS3实现3D纸片折叠动画

2026-04-02 13:57:14

1、新建html文档。

html+CSS3实现3D纸片折叠动画

2、书写hmtl代码。

</div>

html+CSS3实现3D纸片折叠动画

3、初始化css代码。

<style>

@-webkit-keyframes anim { to {

-webkit-transform: rotateZ(0) rotate(1080deg);

transform: rotateZ(0) rotate(1080deg);

}

@keyframes anim { to {

-webkit-transform: rotateZ(0) rotate(1080deg);

transform: rotateZ(0) rotate(1080deg);

}

body { background: black; overflow: hidden; }

</style>

html+CSS3实现3D纸片折叠动画

4、书写css代码。

.wrap { position: relative; width: 500px; height: 500px; margin: 0 auto; }

.wrap .staircase { position: relative; width: inherit; height: inherit; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform: translate3d(200px, 200px, -500px); transform: translate3d(200px, 200px, -500px); }

.wrap .staircase .stair { top: 0; left: 0; position: absolute; width: 40px; height: 200px; /* background: black; */

opacity: .6; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation: anim 10s infinite alternate; animation: anim 10s infinite alternate; -webkit-box-shadow: 0px 1px 3px 3px black; box-shadow: 0px 1px 3px 3px black; }

.stair:nth-child(1) { -webkit-transform: translateZ(-25px) rotate(13deg); transform: translateZ(-25px) rotate(13deg); top: 20px; background: #40bf42; }

.stair:nth-child(2) { -webkit-transform: translateZ(-50px) rotate(26deg); transform: translateZ(-50px) rotate(26deg); top: 20px; background: #40bf44; }

.stair:nth-child(3) { -webkit-transform: translateZ(-75px) rotate(39deg); transform: translateZ(-75px) rotate(39deg); top: 20px; background: #40bf46; }

.stair:nth-child(4) { -webkit-transform: translateZ(-100px) rotate(52deg); transform: translateZ(-100px) rotate(52deg); top: 20px; background: #40bf48; }

.stair:nth-child(5) { -webkit-transform: translateZ(-125px) rotate(65deg); transform: translateZ(-125px) rotate(65deg); top: 20px; background: #40bf4a; }

.stair:nth-child(6) { -webkit-transform: translateZ(-150px) rotate(78deg); transform: translateZ(-150px) rotate(78deg); top: 20px; background: #40bf4d; }

.stair:nth-child(7) { -webkit-transform: translateZ(-175px) rotate(91deg); transform: translateZ(-175px) rotate(91deg); top: 20px; background: #40bf4f; }

.stair:nth-child(8) { -webkit-transform: translateZ(-200px) rotate(104deg); transform: translateZ(-200px) rotate(104deg); top: 20px; background: #40bf51; }

.stair:nth-child(9) { -webkit-transform: translateZ(-225px) rotate(117deg); transform: translateZ(-225px) rotate(117deg); top: 20px; background: #40bf53; }

.stair:nth-child(10) { -webkit-transform: translateZ(-250px) rotate(130deg); transform: translateZ(-250px) rotate(130deg); top: 20px; background: #40bf55; }

.stair:nth-child(11) { -webkit-transform: translateZ(-275px) rotate(143deg); transform: translateZ(-275px) rotate(143deg); top: 20px; background: #40bf57; }

.stair:nth-child(12) { -webkit-transform: translateZ(-300px) rotate(156deg); transform: translateZ(-300px) rotate(156deg); top: 20px; background: #40bf59; }

.stair:nth-child(13) { -webkit-transform: translateZ(-325px) rotate(169deg); transform: translateZ(-325px) rotate(169deg); top: 20px; background: #40bf5b; }

.stair:nth-child(14) { -webkit-transform: translateZ(-350px) rotate(182deg); transform: translateZ(-350px) rotate(182deg); top: 20px; background: #40bf5e; }

.stair:nth-child(15) { -webkit-transform: translateZ(-375px) rotate(195deg); transform: translateZ(-375px) rotate(195deg); top: 20px; background: #40bf60; }

.stair:nth-child(16) { -webkit-transform: translateZ(-400px) rotate(208deg); transform: translateZ(-400px) rotate(208deg); top: 20px; background: #40bf62; }

.stair:nth-child(17) { -webkit-transform: translateZ(-425px) rotate(221deg); transform: translateZ(-425px) rotate(221deg); top: 20px; background: #40bf64; }

.stair:nth-child(18) { -webkit-transform: translateZ(-450px) rotate(234deg); transform: translateZ(-450px) rotate(234deg); top: 20px; background: #40bf66; }

.stair:nth-child(19) { -webkit-transform: translateZ(-475px) rotate(247deg); transform: translateZ(-475px) rotate(247deg); top: 20px; background: #40bf68; }

.stair:nth-child(20) { -webkit-transform: translateZ(-500px) rotate(260deg); transform: translateZ(-500px) rotate(260deg); top: 20px; background: #40bf6a; }

.stair:nth-child(21) { -webkit-transform: translateZ(-525px) rotate(273deg); transform: translateZ(-525px) rotate(273deg); top: 20px; background: #40bf6c; }

.stair:nth-child(22) { -webkit-transform: translateZ(-550px) rotate(286deg); transform: translateZ(-550px) rotate(286deg); top: 20px; background: #40bf6f; }

.stair:nth-child(23) { -webkit-transform: translateZ(-575px) rotate(299deg); transform: translateZ(-575px) rotate(299deg); top: 20px; background: #40bf71; }

.stair:nth-child(24) { -webkit-transform: translateZ(-600px) rotate(312deg); transform: translateZ(-600px) rotate(312deg); top: 20px; background: #40bf73; }

.stair:nth-child(25) { -webkit-transform: translateZ(-625px) rotate(325deg); transform: translateZ(-625px) rotate(325deg); top: 20px; background: #40bf75; }

.stair:nth-child(26) { -webkit-transform: translateZ(-650px) rotate(338deg); transform: translateZ(-650px) rotate(338deg); top: 20px; background: #40bf77; }

.stair:nth-child(27) { -webkit-transform: translateZ(-675px) rotate(351deg); transform: translateZ(-675px) rotate(351deg); top: 20px; background: #40bf79; }

.stair:nth-child(28) { -webkit-transform: translateZ(-700px) rotate(364deg); transform: translateZ(-700px) rotate(364deg); top: 20px; background: #40bf7b; }

.stair:nth-child(29) { -webkit-transform: translateZ(-725px) rotate(377deg); transform: translateZ(-725px) rotate(377deg); top: 20px; background: #40bf7d; }

.stair:nth-child(30) { -webkit-transform: translateZ(-750px) rotate(390deg); transform: translateZ(-750px) rotate(390deg); top: 20px; background: #40bf80; }

.stair:nth-child(31) { -webkit-transform: translateZ(-775px) rotate(403deg); transform: translateZ(-775px) rotate(403deg); top: 20px; background: #40bf82; }

.stair:nth-child(32) { -webkit-transform: translateZ(-800px) rotate(416deg); transform: translateZ(-800px) rotate(416deg); top: 20px; background: #40bf84; }

.stair:nth-child(33) { -webkit-transform: translateZ(-825px) rotate(429deg); transform: translateZ(-825px) rotate(429deg); top: 20px; background: #40bf86; }

.stair:nth-child(34) { -webkit-transform: translateZ(-850px) rotate(442deg); transform: translateZ(-850px) rotate(442deg); top: 20px; background: #40bf88; }

.stair:nth-child(35) { -webkit-transform: translateZ(-875px) rotate(455deg); transform: translateZ(-875px) rotate(455deg); top: 20px; background: #40bf8a; }

.stair:nth-child(36) { -webkit-transform: translateZ(-900px) rotate(468deg); transform: translateZ(-900px) rotate(468deg); top: 20px; background: #40bf8c; }

.stair:nth-child(37) { -webkit-transform: translateZ(-925px) rotate(481deg); transform: translateZ(-925px) rotate(481deg); top: 20px; background: #40bf8e; }

.stair:nth-child(38) { -webkit-transform: translateZ(-950px) rotate(494deg); transform: translateZ(-950px) rotate(494deg); top: 20px; background: #40bf91; }

.stair:nth-child(39) { -webkit-transform: translateZ(-975px) rotate(507deg); transform: translateZ(-975px) rotate(507deg); top: 20px; background: #40bf93; }

.stair:nth-child(40) { -webkit-transform: translateZ(-1000px) rotate(520deg); transform: translateZ(-1000px) rotate(520deg); top: 20px; background: #40bf95; }

.stair:nth-child(41) { -webkit-transform: translateZ(-1025px) rotate(533deg); transform: translateZ(-1025px) rotate(533deg); top: 20px; background: #40bf97; }

.stair:nth-child(42) { -webkit-transform: translateZ(-1050px) rotate(546deg); transform: translateZ(-1050px) rotate(546deg); top: 20px; background: #40bf99; }

.stair:nth-child(43) { -webkit-transform: translateZ(-1075px) rotate(559deg); transform: translateZ(-1075px) rotate(559deg); top: 20px; background: #40bf9b; }

.stair:nth-child(44) { -webkit-transform: translateZ(-1100px) rotate(572deg); transform: translateZ(-1100px) rotate(572deg); top: 20px; background: #40bf9d; }

.stair:nth-child(45) { -webkit-transform: translateZ(-1125px) rotate(585deg); transform: translateZ(-1125px) rotate(585deg); top: 20px; background: #40bf9f; }

.stair:nth-child(46) { -webkit-transform: translateZ(-1150px) rotate(598deg); transform: translateZ(-1150px) rotate(598deg); top: 20px; background: #40bfa2; }

.stair:nth-child(47) { -webkit-transform: translateZ(-1175px) rotate(611deg); transform: translateZ(-1175px) rotate(611deg); top: 20px; background: #40bfa4; }

.stair:nth-child(48) { -webkit-transform: translateZ(-1200px) rotate(624deg); transform: translateZ(-1200px) rotate(624deg); top: 20px; background: #40bfa6; }

.stair:nth-child(49) { -webkit-transform: translateZ(-1225px) rotate(637deg); transform: translateZ(-1225px) rotate(637deg); top: 20px; background: #40bfa8; }

.stair:nth-child(50) { -webkit-transform: translateZ(-1250px) rotate(650deg); transform: translateZ(-1250px) rotate(650deg); top: 20px; background: #40bfaa; }

.stair:nth-child(51) { -webkit-transform: translateZ(-1275px) rotate(663deg); transform: translateZ(-1275px) rotate(663deg); top: 20px; background: #40bfac; }

.stair:nth-child(52) { -webkit-transform: translateZ(-1300px) rotate(676deg); transform: translateZ(-1300px) rotate(676deg); top: 20px; background: #40bfae; }

.stair:nth-child(53) { -webkit-transform: translateZ(-1325px) rotate(689deg); transform: translateZ(-1325px) rotate(689deg); top: 20px; background: #40bfb0; }

.stair:nth-child(54) { -webkit-transform: translateZ(-1350px) rotate(702deg); transform: translateZ(-1350px) rotate(702deg); top: 20px; background: #40bfb3; }

.stair:nth-child(55) { -webkit-transform: translateZ(-1375px) rotate(715deg); transform: translateZ(-1375px) rotate(715deg); top: 20px; background: #40bfb5; }

.stair:nth-child(56) { -webkit-transform: translateZ(-1400px) rotate(728deg); transform: translateZ(-1400px) rotate(728deg); top: 20px; background: #40bfb7; }

.stair:nth-child(57) { -webkit-transform: translateZ(-1425px) rotate(741deg); transform: translateZ(-1425px) rotate(741deg); top: 20px; background: #40bfb9; }

.stair:nth-child(58) { -webkit-transform: translateZ(-1450px) rotate(754deg); transform: translateZ(-1450px) rotate(754deg); top: 20px; background: #40bfbb; }

.stair:nth-child(59) { -webkit-transform: translateZ(-1475px) rotate(767deg); transform: translateZ(-1475px) rotate(767deg); top: 20px; background: #40bfbd; }

.stair:nth-child(60) { -webkit-transform: translateZ(-1500px) rotate(780deg); transform: translateZ(-1500px) rotate(780deg); top: 20px; background: #40bfbf; }

.stair:nth-child(61) { -webkit-transform: translateZ(-1525px) rotate(793deg); transform: translateZ(-1525px) rotate(793deg); top: 20px; background: #40bdbf; }

.stair:nth-child(62) { -webkit-transform: translateZ(-1550px) rotate(806deg); transform: translateZ(-1550px) rotate(806deg); top: 20px; background: #40bbbf; }

.stair:nth-child(63) { -webkit-transform: translateZ(-1575px) rotate(819deg); transform: translateZ(-1575px) rotate(819deg); top: 20px; background: #40b9bf; }

.stair:nth-child(64) { -webkit-transform: translateZ(-1600px) rotate(832deg); transform: translateZ(-1600px) rotate(832deg); top: 20px; background: #40b7bf; }

.stair:nth-child(65) { -webkit-transform: translateZ(-1625px) rotate(845deg); transform: translateZ(-1625px) rotate(845deg); top: 20px; background: #40b5bf; }

.stair:nth-child(66) { -webkit-transform: translateZ(-1650px) rotate(858deg); transform: translateZ(-1650px) rotate(858deg); top: 20px; background: #40b2bf; }

.stair:nth-child(67) { -webkit-transform: translateZ(-1675px) rotate(871deg); transform: translateZ(-1675px) rotate(871deg); top: 20px; background: #40b0bf; }

.stair:nth-child(68) { -webkit-transform: translateZ(-1700px) rotate(884deg); transform: translateZ(-1700px) rotate(884deg); top: 20px; background: #40aebf; }

.stair:nth-child(69) { -webkit-transform: translateZ(-1725px) rotate(897deg); transform: translateZ(-1725px) rotate(897deg); top: 20px; background: #40acbf; }

.stair:nth-child(70) { -webkit-transform: translateZ(-1750px) rotate(910deg); transform: translateZ(-1750px) rotate(910deg); top: 20px; background: #40aabf; }

.stair:nth-child(71) { -webkit-transform: translateZ(-1775px) rotate(923deg); transform: translateZ(-1775px) rotate(923deg); top: 20px; background: #40a8bf; }

.stair:nth-child(72) { -webkit-transform: translateZ(-1800px) rotate(936deg); transform: translateZ(-1800px) rotate(936deg); top: 20px; background: #40a6bf; }

.stair:nth-child(73) { -webkit-transform: translateZ(-1825px) rotate(949deg); transform: translateZ(-1825px) rotate(949deg); top: 20px; background: #40a4bf; }

.stair:nth-child(74) { -webkit-transform: translateZ(-1850px) rotate(962deg); transform: translateZ(-1850px) rotate(962deg); top: 20px; background: #40a2bf; }

.stair:nth-child(75) { -webkit-transform: translateZ(-1875px) rotate(975deg); transform: translateZ(-1875px) rotate(975deg); top: 20px; background: #409fbf; }

.stair:nth-child(76) { -webkit-transform: translateZ(-1900px) rotate(988deg); transform: translateZ(-1900px) rotate(988deg); top: 20px; background: #409dbf; }

.stair:nth-child(77) { -webkit-transform: translateZ(-1925px) rotate(1001deg); transform: translateZ(-1925px) rotate(1001deg); top: 20px; background: #409bbf; }

.stair:nth-child(78) { -webkit-transform: translateZ(-1950px) rotate(1014deg); transform: translateZ(-1950px) rotate(1014deg); top: 20px; background: #4099bf; }

.stair:nth-child(79) { -webkit-transform: translateZ(-1975px) rotate(1027deg); transform: translateZ(-1975px) rotate(1027deg); top: 20px; background: #4097bf; }

.stair:nth-child(80) { -webkit-transform: translateZ(-2000px) rotate(1040deg); transform: translateZ(-2000px) rotate(1040deg); top: 20px; background: #4095bf; }

.stair:nth-child(81) { -webkit-transform: translateZ(-2025px) rotate(1053deg); transform: translateZ(-2025px) rotate(1053deg); top: 20px; background: #4093bf; }

.stair:nth-child(82) { -webkit-transform: translateZ(-2050px) rotate(1066deg); transform: translateZ(-2050px) rotate(1066deg); top: 20px; background: #4090bf; }

.stair:nth-child(83) { -webkit-transform: translateZ(-2075px) rotate(1079deg); transform: translateZ(-2075px) rotate(1079deg); top: 20px; background: #408ebf; }

.stair:nth-child(84) { -webkit-transform: translateZ(-2100px) rotate(1092deg); transform: translateZ(-2100px) rotate(1092deg); top: 20px; background: #408cbf; }

.stair:nth-child(85) { -webkit-transform: translateZ(-2125px) rotate(1105deg); transform: translateZ(-2125px) rotate(1105deg); top: 20px; background: #408abf; }

.stair:nth-child(86) { -webkit-transform: translateZ(-2150px) rotate(1118deg); transform: translateZ(-2150px) rotate(1118deg); top: 20px; background: #4088bf; }

.stair:nth-child(87) { -webkit-transform: translateZ(-2175px) rotate(1131deg); transform: translateZ(-2175px) rotate(1131deg); top: 20px; background: #4086bf; }

.stair:nth-child(88) { -webkit-transform: translateZ(-2200px) rotate(1144deg); transform: translateZ(-2200px) rotate(1144deg); top: 20px; background: #4084bf; }

.stair:nth-child(89) { -webkit-transform: translateZ(-2225px) rotate(1157deg); transform: translateZ(-2225px) rotate(1157deg); top: 20px; background: #4082bf; }

.stair:nth-child(90) { -webkit-transform: translateZ(-2250px) rotate(1170deg); transform: translateZ(-2250px) rotate(1170deg); top: 20px; background: #407fbf; }

.stair:nth-child(91) { -webkit-transform: translateZ(-2275px) rotate(1183deg); transform: translateZ(-2275px) rotate(1183deg); top: 20px; background: #407dbf; }

.stair:nth-child(92) { -webkit-transform: translateZ(-2300px) rotate(1196deg); transform: translateZ(-2300px) rotate(1196deg); top: 20px; background: #407bbf; }

.stair:nth-child(93) { -webkit-transform: translateZ(-2325px) rotate(1209deg); transform: translateZ(-2325px) rotate(1209deg); top: 20px; background: #4079bf; }

.stair:nth-child(94) { -webkit-transform: translateZ(-2350px) rotate(1222deg); transform: translateZ(-2350px) rotate(1222deg); top: 20px; background: #4077bf; }

.stair:nth-child(95) { -webkit-transform: translateZ(-2375px) rotate(1235deg); transform: translateZ(-2375px) rotate(1235deg); top: 20px; background: #4075bf; }

.stair:nth-child(96) { -webkit-transform: translateZ(-2400px) rotate(1248deg); transform: translateZ(-2400px) rotate(1248deg); top: 20px; background: #4073bf; }

.stair:nth-child(97) { -webkit-transform: translateZ(-2425px) rotate(1261deg); transform: translateZ(-2425px) rotate(1261deg); top: 20px; background: #4071bf; }

.stair:nth-child(98) { -webkit-transform: translateZ(-2450px) rotate(1274deg); transform: translateZ(-2450px) rotate(1274deg); top: 20px; background: #406fbf; }

.stair:nth-child(99) { -webkit-transform: translateZ(-2475px) rotate(1287deg); transform: translateZ(-2475px) rotate(1287deg); top: 20px; background: #406cbf; }

.stair:nth-child(100) { -webkit-transform: translateZ(-2500px) rotate(1300deg); transform: translateZ(-2500px) rotate(1300deg); top: 20px; background: #406abf; }

html+CSS3实现3D纸片折叠动画

5、代码整体结构。

html+CSS3实现3D纸片折叠动画

6、查看效果。

html+CSS3实现3D纸片折叠动画

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。