使用css3制作3d图集

最新推荐文章于 2022-07-24 23:06:40 发布

技术爱好者Joker

最新推荐文章于 2022-07-24 23:06:40 发布

阅读量263

点赞数 1

分类专栏：前端文章标签： css css3

本文链接：https://blog.youkuaiyun.com/weixin_38874840/article/details/107733856

版权

前端专栏收录该内容

48 篇文章

订阅专栏

使用了一些转换器生成gif，忽略水印。

html

<main>
    <ul>
      <li><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1596272321&di=8654a0aaa39f3df06f07f321e69116cf&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg" alt=""></li>
      <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596283366542&di=5faec52636f30416e12eff3d0b5759d8&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F55%2F22%2F20300000929429130630222900050.jpg" alt=""></li>
      <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596283366540&di=39ef9f22b97c9d725822880a99820b99&imgtype=0&src=http%3A%2F%2Fbjimg.focus.cn%2Fupload%2Fphotos%2F128%2F8BYzSdXP.gif" alt=""></li>
      <li><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=894586452,1799351005&fm=26&gp=0.jpg" alt=""></li>
      <li><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1900883959,1006465321&fm=26&gp=0.jpg" alt=""></li>
      <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596283366548&di=201889959ac4a213953870eedd30da06&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F62%2F02%2F01300542526392139955025309984.jpg" alt=""></li>

    </ul>
  </main>


main{
  width: 400px;
  height: 400px;
  cursor: pointer;
}
main ul{
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(600px);
  transform-origin: center -100px -150px;
  transition: all 2s linear;
}
main:hover ul{
  transform: perspective(600px) rotateY(360deg);
}

ul li{
  position: absolute;
  top: 120px;
  left: 150px;
  width: 100px;
  height: 100px;
  background: #986;
  color: #fff;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform-origin: center center -150px;
  overflow: hidden;
}
div{
  width: 100px;
  height: 100px;
  overflow: hidden;
}
img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
ul li:nth-of-type(1){
  transform: rotateY(60deg);
}
ul li:nth-of-type(2){
  transform: rotateY(120deg);
}
ul li:nth-of-type(3){
  transform: rotateY(180deg);
}
ul li:nth-of-type(4){
  transform: rotateY(240deg);
}
ul li:nth-of-type(5){
  transform: rotateY(300deg);
}
ul li:nth-of-type(6){
  transform: rotateY(360deg);
}