3D旋转的CSS艺术折纸动画

来源:https://www.sucaihuo.com/js/3108.html 2017-09-29 14:54浏览(1084) 收藏

一款3D旋转的CSS艺术折纸动画,折纸以3D的方式进行旋转,而折纸上面的梯子也会有不同的形状变化和阴影效果。
3D旋转的CSS艺术折纸动画
分类:css3 > transform 难易:初级
查看演示 下载资源: 5 下载资源 下载积分: 20 积分

页面的head部分,需引入页面的样式文件,主要用了CSS3的transform属性,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,需设置好折纸、梯子、阴影等的容器,代码如下:

<div id="trick_art">
  <div class="paper">
    <div class="slice top">
      <div class="ladder_wrapper ladder_shadow">
        <div class="ladder_left"></div>
        <div class="ladder_right"></div>
        <div class="ladder_steps">
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
        </div>
      </div>
      <div class="ladder_wrapper ladder_main">
        <div class="ladder_left"></div>
        <div class="ladder_right"></div>
        <div class="ladder_steps">
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
        </div>
      </div>
    </div>
    <div class="slice bottom">
      <div class="ladder_wrapper ladder_shadow">
        <div class="ladder_left"></div>
        <div class="ladder_right"></div>
        <div class="ladder_steps">
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
        </div>
      </div>
      <div class="ladder_wrapper ladder_main">
        <div class="ladder_left"></div>
        <div class="ladder_right"></div>
        <div class="ladder_steps">
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
          <div class="ladder_step"></div>
        </div>
      </div>
    </div>
  </div>
</div>
标签: 旋转3d折纸
评论6
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

  • 头像 5楼
    01-15 20:46
    心***扬
    nice,别出心裁的一个,大大的赞,感谢分享
  • 头像 4楼
    10-23 08:48
    战***旗
    这个挺难的,3d效果,非常炫酷啊
  • 头像 3楼
    10-17 07:51
    请***神
    非常好看的啊
  • 头像 板凳
    10-14 21:39
    W***歌
    慢慢的,我也会做这个
  • 头像 椅子
    10-11 10:49
    q***r
    可以的,有用
  • 头像 沙发
    10-07 09:23
    胡***胡
    非常好看!!!
1 2