响应式圆形卡片布局

Question

我创建了一个圆形的卡片布局。它根据要显示的卡片数量计算旋转和 z-index 等，这就是值在 html.

中的原因

我希望它根据屏幕尺寸缩小圆圈的大小，以提高响应速度。

不确定是否可行，因为 rotate/z-index 在 html 中，如果我可以在它达到移动尺寸后将其更改为单张卡片？

代码笔是https://codepen.io/cdgraham/pen/bGwMYwN

.tarot-deck {
    height: 850px;
    width: 100%;
    margin: 30px auto;
}

ul.tarot-spread {
    width: 100px;
    height: 170px;
    margin: 0 auto 30px;
    position: relative;
    padding: 0;
    list-style-type: none;
}

.tarot-deck ul.tarot-spread li {
    border-radius: 5px;
    padding: 0;
    border: 1px solid #b3cde0;
}

ul.tarot-spread li {
width: 100px;
height: 170px;
margin: 0;
position: absolute;
top: 0;
left: 0;
background: #fff;
pointer-events: auto;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-transform-origin: 50% 235% 0px;
        transform-origin: 50% 235% 0px;
transition: transform 20000ms ease-in 0ms;
}

.tarot-deck li img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    pointer-events: auto;
    cursor: pointer;
}

.tarot-deck li img:hover{
    opacity: 0.75;
}

.tarot-deck li img.card-oracle-image-hidden {
    display: none;
}

<div class="container">
   <div class="tarot-deck">
      <ul class="tarot-spread">
         <li style="z-index: 1000; transform: translate(0px) rotate(0deg);"><img style="z-index: 1000;" id="back3890" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3890" ><img style="z-index: 2000;" id="card3890" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor01-6.jpg" ></li>
         <li style="z-index: 1001; transform: translate(0px) rotate(16.363636363636deg);"><img style="z-index: 1001;" id="back3899" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3899" ><img style="z-index: 2001;" id="card3899" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor02-6.jpg" ></li>
         <li style="z-index: 1002; transform: translate(0px) rotate(32.727272727273deg);"><img style="z-index: 1002;" id="back3953" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3953" ><img style="z-index: 2002;" id="card3953" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor08-6.jpg" ></li>
         <li style="z-index: 1003; transform: translate(0px) rotate(49.090909090909deg);"><img style="z-index: 1003;" id="back3917" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3917" ><img style="z-index: 2003;" id="card3917" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor04-6.jpg" ></li>
         <li style="z-index: 1004; transform: translate(0px) rotate(65.454545454545deg);"><img style="z-index: 1004;" id="back4043" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4043" ><img style="z-index: 2004;" id="card4043" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor18-6.jpg" ></li>
         <li style="z-index: 1005; transform: translate(0px) rotate(81.818181818182deg);"><img style="z-index: 1005;" id="back3935" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3935" ><img style="z-index: 2005;" id="card3935" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor06-6.jpg" ></li>
         <li style="z-index: 1006; transform: translate(0px) rotate(98.181818181818deg);"><img style="z-index: 1006;" id="back4061" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4061" ><img style="z-index: 2006;" id="card4061" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor20-6.jpg" ></li>
         <li style="z-index: 1007; transform: translate(0px) rotate(114.54545454545deg);"><img style="z-index: 1007;" id="back4052" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4052" ><img style="z-index: 2007;" id="card4052" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor19-6.jpg" ></li>
         <li style="z-index: 1008; transform: translate(0px) rotate(130.90909090909deg);"><img style="z-index: 1008;" id="back4016" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4016" ><img style="z-index: 2008;" id="card4016" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor15-6.jpg" ></li>
         <li style="z-index: 1009; transform: translate(0px) rotate(147.27272727273deg);"><img style="z-index: 1009;" id="back3944" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3944" ><img style="z-index: 2009;" id="card3944" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor07-6.jpg" ></li>
         <li style="z-index: 1010; transform: translate(0px) rotate(163.63636363636deg);"><img style="z-index: 1010;" id="back4007" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4007" ><img style="z-index: 2010;" id="card4007" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor14-6.jpg" ></li>
         <li style="z-index: 1011; transform: translate(0px) rotate(180deg);"><img style="z-index: 1011;" id="back3998" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3998" ><img style="z-index: 2011;" id="card3998" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor13-6.jpg" ></li>
         <li style="z-index: 1012; transform: translate(0px) rotate(196.36363636364deg);"><img style="z-index: 1012;" id="back3962" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3962" ><img style="z-index: 2012;" id="card3962" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor09-6.jpg" ></li>
         <li style="z-index: 1013; transform: translate(0px) rotate(212.72727272727deg);"><img style="z-index: 1013;" id="back3980" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3980" ><img style="z-index: 2013;" id="card3980" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor11-6.jpg" ></li>
         <li style="z-index: 1014; transform: translate(0px) rotate(229.09090909091deg);"><img style="z-index: 1014;" id="back3926" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3926" ><img style="z-index: 2014;" id="card3926" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor05-6.jpg" ></li>
         <li style="z-index: 1015; transform: translate(0px) rotate(245.45454545455deg);"><img style="z-index: 1015;" id="back4034" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4034" ><img style="z-index: 2015;" id="card4034" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor17-6.jpg" ></li>
         <li style="z-index: 1016; transform: translate(0px) rotate(261.81818181818deg);"><img style="z-index: 1016;" id="back3989" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3989" ><img style="z-index: 2016;" id="card3989" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor12-6.jpg" ></li>
         <li style="z-index: 1017; transform: translate(0px) rotate(278.18181818182deg);"><img style="z-index: 1017;" id="back3971" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3971" ><img style="z-index: 2017;" id="card3971" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor10-6.jpg" ></li>
         <li style="z-index: 1018; transform: translate(0px) rotate(294.54545454545deg);"><img style="z-index: 1018;" id="back4025" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4025" ><img style="z-index: 2018;" id="card4025" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor16-6.jpg" ></li>
         <li style="z-index: 1019; transform: translate(0px) rotate(310.90909090909deg);"><img style="z-index: 1019;" id="back4070" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4070" ><img style="z-index: 2019;" id="card4070" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor21-6.jpg" ></li>
         <li style="z-index: 1020; transform: translate(0px) rotate(327.27272727273deg);"><img style="z-index: 1020;" id="back3881" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3881" ><img style="z-index: 2020;" id="card3881" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor00-6.jpg" ></li>
         <li style="z-index: 1021; transform: translate(0px) rotate(343.63636363636deg);"><img style="z-index: 1021;" id="back3908" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3908" ><img style="z-index: 2021;" id="card3908" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor03-6.jpg" ></li>
      </ul>
   </div>
</div>

Answer 1

需要响应式调整大小？使用媒体查询和 vh / vw.

仅 CSS 样式的添加和修复。其余评论在代码中

body { margin: 0; }

.tarot-deck {
  /* Height based on window dimensions */
  height: calc(var(--scale) * 8.5);
  margin: calc(var(--scale) * 0.3) auto;
}

ul.tarot-spread {
  /* Setting the required proportions to the cards */
  width: calc(var(--scale) * 1);
  height: calc(var(--scale) * 1.7);
  margin: 0 auto;
  position: relative;
  padding: 0;
  list-style-type: none;
}
/* Media queries to ensure that the circle always fits the screen */
@media (orientation: landscape) { .tarot-deck { --scale: 11vh; } }
@media (orientation: portrait) { .tarot-deck { --scale: 11vw; } }

.tarot-deck ul.tarot-spread li {
  border-radius: 5px;
  padding: 0;
  border: 1px solid #b3cde0;
}

ul.tarot-spread li {
  /* Here we duplicate the size of the parent block */
  width: inherit;
  height: inherit;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  pointer-events: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 50% 235% 0px;
  transform-origin: 50% 235% 0px;
  transition: transform 20000ms ease-in 0ms;
}

.tarot-deck li img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  pointer-events: auto;
  cursor: pointer;
}

.tarot-deck li img:hover {
  opacity: 0.75;
}

.tarot-deck li img.card-oracle-image-hidden {
  display: none;
}

<div class="container">
  <div class="tarot-deck">
    <ul class="tarot-spread">
      <li style="z-index: 1000; transform: translate(0px) rotate(0deg);"><img style="z-index: 1000;" id="back3890" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3890"><img style="z-index: 2000;" id="card3890" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor01-6.jpg"></li>
      <li style="z-index: 1001; transform: translate(0px) rotate(16.363636363636deg);"><img style="z-index: 1001;" id="back3899" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3899"><img style="z-index: 2001;" id="card3899" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor02-6.jpg"></li>
      <li style="z-index: 1002; transform: translate(0px) rotate(32.727272727273deg);"><img style="z-index: 1002;" id="back3953" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3953"><img style="z-index: 2002;" id="card3953" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor08-6.jpg"></li>
      <li style="z-index: 1003; transform: translate(0px) rotate(49.090909090909deg);"><img style="z-index: 1003;" id="back3917" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3917"><img style="z-index: 2003;" id="card3917" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor04-6.jpg"></li>
      <li style="z-index: 1004; transform: translate(0px) rotate(65.454545454545deg);"><img style="z-index: 1004;" id="back4043" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4043"><img style="z-index: 2004;" id="card4043" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor18-6.jpg"></li>
      <li style="z-index: 1005; transform: translate(0px) rotate(81.818181818182deg);"><img style="z-index: 1005;" id="back3935" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3935"><img style="z-index: 2005;" id="card3935" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor06-6.jpg"></li>
      <li style="z-index: 1006; transform: translate(0px) rotate(98.181818181818deg);"><img style="z-index: 1006;" id="back4061" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4061"><img style="z-index: 2006;" id="card4061" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor20-6.jpg"></li>
      <li style="z-index: 1007; transform: translate(0px) rotate(114.54545454545deg);"><img style="z-index: 1007;" id="back4052" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4052"><img style="z-index: 2007;" id="card4052" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor19-6.jpg"></li>
      <li style="z-index: 1008; transform: translate(0px) rotate(130.90909090909deg);"><img style="z-index: 1008;" id="back4016" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4016"><img style="z-index: 2008;" id="card4016" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor15-6.jpg"></li>
      <li style="z-index: 1009; transform: translate(0px) rotate(147.27272727273deg);"><img style="z-index: 1009;" id="back3944" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3944"><img style="z-index: 2009;" id="card3944" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor07-6.jpg"></li>
      <li style="z-index: 1010; transform: translate(0px) rotate(163.63636363636deg);"><img style="z-index: 1010;" id="back4007" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4007"><img style="z-index: 2010;" id="card4007" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor14-6.jpg"></li>
      <li style="z-index: 1011; transform: translate(0px) rotate(180deg);"><img style="z-index: 1011;" id="back3998" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3998"><img style="z-index: 2011;" id="card3998" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor13-6.jpg"></li>
      <li style="z-index: 1012; transform: translate(0px) rotate(196.36363636364deg);"><img style="z-index: 1012;" id="back3962" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3962"><img style="z-index: 2012;" id="card3962" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor09-6.jpg"></li>
      <li style="z-index: 1013; transform: translate(0px) rotate(212.72727272727deg);"><img style="z-index: 1013;" id="back3980" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3980"><img style="z-index: 2013;" id="card3980" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor11-6.jpg"></li>
      <li style="z-index: 1014; transform: translate(0px) rotate(229.09090909091deg);"><img style="z-index: 1014;" id="back3926" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3926"><img style="z-index: 2014;" id="card3926" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor05-6.jpg"></li>
      <li style="z-index: 1015; transform: translate(0px) rotate(245.45454545455deg);"><img style="z-index: 1015;" id="back4034" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4034"><img style="z-index: 2015;" id="card4034" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor17-6.jpg"></li>
      <li style="z-index: 1016; transform: translate(0px) rotate(261.81818181818deg);"><img style="z-index: 1016;" id="back3989" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3989"><img style="z-index: 2016;" id="card3989" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor12-6.jpg"></li>
      <li style="z-index: 1017; transform: translate(0px) rotate(278.18181818182deg);"><img style="z-index: 1017;" id="back3971" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3971"><img style="z-index: 2017;" id="card3971" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor10-6.jpg"></li>
      <li style="z-index: 1018; transform: translate(0px) rotate(294.54545454545deg);"><img style="z-index: 1018;" id="back4025" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4025"><img style="z-index: 2018;" id="card4025" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor16-6.jpg"></li>
      <li style="z-index: 1019; transform: translate(0px) rotate(310.90909090909deg);"><img style="z-index: 1019;" id="back4070" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="4070"><img style="z-index: 2019;" id="card4070" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor21-6.jpg"></li>
      <li style="z-index: 1020; transform: translate(0px) rotate(327.27272727273deg);"><img style="z-index: 1020;" id="back3881" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3881"><img style="z-index: 2020;" id="card3881" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor00-6.jpg"></li>
      <li style="z-index: 1021; transform: translate(0px) rotate(343.63636363636deg);"><img style="z-index: 1021;" id="back3908" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesdemo_card_back-6.png" data-value="3908"><img style="z-index: 2021;" id="card3908" class="card-oracle-image-hidden" src="https://cuspstudios.com/wp-content/uploads/2020/10/assetsimagesmajor03-6.jpg"></li>
    </ul>
  </div>
</div>

响应式圆形卡片布局

Responsive circular card layout

css

responsive