经验分享程序开发文档资料数据资源其它资源

CSS3实现3D纸片折叠动画代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现3D纸片折叠动画代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

CSS3实现3D纸片折叠动画代码

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>CSS3实现3D纸片折叠动画</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>

  <div class="wrap">
  <div class="staircase">
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>    
  </div>
</div>
</body>
</html>

CSS代码(style.css):

@-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;}
.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;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
2.31 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
2.31 KB
立即下载
孔芝
了解
打赏作者 鼓励作者
Html 动画效果3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章