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

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

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

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

1 2