等距3D-图块

下载代码

html

css

js

分享到微信朋友圈

X

html

<div class='wrapper'>
  <ul class='products'>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300a.png?-1)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300b.png?-2)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300c.png?-3)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300.png?-4)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300a.png?-5)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300b.png?-6)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300c.png?-7)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300d.png?-8)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300.png?-9)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300.png?-10)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300a.png?-11)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300b.png?-12)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300c.png?-13)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300.png?-14)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300d.png?-15)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300.png?-16)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300a.png?-17)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300b.png?-18)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300c.png?-19)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300d.png?-20)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300.png?-21)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300a.png?-22)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300b.png?-23)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300c.png?-24)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300.png?-25)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300a.png?-26)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300b.png?-27)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300.png?-28)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300b.png?-29)'></div>
    </li>
    <li>
      <div style='background-image: url(http://www.jq22.com/img/cs/500x300c.png?-30)'></div>
    </li>
  </ul>
</div>

css

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  background: #282828;
}

.wrapper {
  transform: scale(1, 0.5);
}

.products {
  padding: 0;
  margin: 0;
  width: 500px;
  transform: rotate(-45deg);
}
.products li {
  transition: box-shadow 0.5s, transform 0.5s, opacity 1s;
  list-style-type: none;
  width: 23.333333333%;
  float: left;
  background: #fff;
  height: 150px;
  margin: 1.5%;
  position: relative;
  transform: translate3d(0, 0, 0);
  overflow: hidden;
  border-radius: 10px;
  box-shadow: -2px 2px 0 0 #7a7a7a, -4px 4px 0 0 #7a7a7a, -6px 6px 0 0 #7a7a7a, -8px 8px 0 0 #7a7a7a, -50px 50px 120px 20px rgba(0, 0, 0, 0.5);
}
.products li.hidden {
  transform: translate3d(-100px, 100px, 0);
  opacity: 0 !important;
  box-shadow: -2px 2px 0 0 #7a7a7a, -4px 4px 0 0 #7a7a7a, -6px 6px 0 0 #7a7a7a, -8px 8px 0 0 #7a7a7a, -10px 10px 2px 2px rgba(0, 0, 0, 0.2);
}
.products li > div {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>等距3D-图块-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号