Question

我在html和css中发现了一个很酷的双螺旋可视化效果，我尝试通过将ProductSpecification从10deg更改为90deg来对其进行一些更改，然后我意识到ul的高度没有减小。

我已尝试将其最小化，但没有人起作用（li的大小也表现得很奇怪，所以这可能会影响ul的大小，请同时帮助我解决这两个问题）

链接：codepen.io/hugo/pen/AjJFL

Edit1：我在其上方添加了一个div并设置了最大宽度和最大高度，但这没用

transform: rotateZ

html {
  background-color: black;
  font-size: 7px;
}

ul {
  transform: rotateZ(10deg);
  list-style: none;
  transform-style: preserve-3d;
}

li {
  animation: spin 12s linear infinite;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiNjMDM5MmIiLz48c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzM0OThkYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(46%, #c0392b), color-stop(47%, #3498db));
  background-image: -moz-linear-gradient(left, #c0392b 46%, #3498db 47%);
  background-image: -webkit-linear-gradient(left, #c0392b 46%, #3498db 47%);
  background-image: linear-gradient(to right, #c0392b 46%, #3498db 47%);
  box-shadow: -1.5rem 0 0 #c0392b, 1.5rem 0 0 #3498db;
  border-radius: 1rem;
  height: 1rem;
  margin: 1rem auto;
  position: relative;
  width: 25rem;
}

li:before,
li:after {
  background: #3498db;
  border-radius: 50%;
  content: '';
  height: 2rem;
  position: absolute;
  top: -0.5rem;
  width: 2rem;
}

li:before {
  background: #c0392b;
  left: -1rem;
}

li:after {
  right: -1rem;
}

li:nth-child(0) {
  animation-delay: 0s;
}

li:nth-child(1) {
  animation-delay: -0.2s;
}

li:nth-child(2) {
  animation-delay: -0.4s;
}

li:nth-child(3) {
  animation-delay: -0.6s;
}

li:nth-child(4) {
  animation-delay: -0.8s;
}

li:nth-child(5) {
  animation-delay: -1s;
}

li:nth-child(6) {
  animation-delay: -1.2s;
}

li:nth-child(7) {
  animation-delay: -1.4s;
}

li:nth-child(8) {
  animation-delay: -1.6s;
}

li:nth-child(9) {
  animation-delay: -1.8s;
}

li:nth-child(10) {
  animation-delay: -2s;
}

li:nth-child(11) {
  animation-delay: -2.2s;
}

li:nth-child(12) {
  animation-delay: -2.4s;
}

li:nth-child(13) {
  animation-delay: -2.6s;
}

li:nth-child(14) {
  animation-delay: -2.8s;
}

li:nth-child(15) {
  animation-delay: -3s;
}

li:nth-child(16) {
  animation-delay: -3.2s;
}

li:nth-child(17) {
  animation-delay: -3.4s;
}

li:nth-child(18) {
  animation-delay: -3.6s;
}

li:nth-child(19) {
  animation-delay: -3.8s;
}

li:nth-child(20) {
  animation-delay: -4s;
}

li:nth-child(21) {
  animation-delay: -4.2s;
}

li:nth-child(22) {
  animation-delay: -4.4s;
}

li:nth-child(23) {
  animation-delay: -4.6s;
}

li:nth-child(24) {
  animation-delay: -4.8s;
}

li:nth-child(25) {
  animation-delay: -5s;
}

li:nth-child(26) {
  animation-delay: -5.2s;
}

li:nth-child(27) {
  animation-delay: -5.4s;
}

li:nth-child(28) {
  animation-delay: -5.6s;
}

li:nth-child(29) {
  animation-delay: -5.8s;
}

li:nth-child(30) {
  animation-delay: -6s;
}

li:nth-child(31) {
  animation-delay: -6.2s;
}

li:nth-child(32) {
  animation-delay: -6.4s;
}

li:nth-child(33) {
  animation-delay: -6.6s;
}

li:nth-child(34) {
  animation-delay: -6.8s;
}

li:nth-child(35) {
  animation-delay: -7s;
}

li:nth-child(36) {
  animation-delay: -7.2s;
}

li:nth-child(37) {
  animation-delay: -7.4s;
}

li:nth-child(38) {
  animation-delay: -7.6s;
}

li:nth-child(39) {
  animation-delay: -7.8s;
}

li:nth-child(40) {
  animation-delay: -8s;
}

li:nth-child(41) {
  animation-delay: -8.2s;
}

li:nth-child(42) {
  animation-delay: -8.4s;
}

li:nth-child(43) {
  animation-delay: -8.6s;
}

li:nth-child(44) {
  animation-delay: -8.8s;
}

li:nth-child(45) {
  animation-delay: -9s;
}

li:nth-child(46) {
  animation-delay: -9.2s;
}

li:nth-child(47) {
  animation-delay: -9.4s;
}

li:nth-child(48) {
  animation-delay: -9.6s;
}

li:nth-child(49) {
  animation-delay: -9.8s;
}

li:nth-child(50) {
  animation-delay: -10s;
}

li:nth-child(51) {
  animation-delay: -10.2s;
}

li:nth-child(52) {
  animation-delay: -10.4s;
}

li:nth-child(53) {
  animation-delay: -10.6s;
}

li:nth-child(54) {
  animation-delay: -10.8s;
}

li:nth-child(55) {
  animation-delay: -11s;
}

li:nth-child(56) {
  animation-delay: -11.2s;
}

li:nth-child(57) {
  animation-delay: -11.4s;
}

li:nth-child(58) {
  animation-delay: -11.6s;
}

li:nth-child(59) {
  animation-delay: -11.8s;
}

li:nth-child(60) {
  animation-delay: -12s;
}

li:nth-child(61) {
  animation-delay: -12.2s;
}

li:nth-child(62) {
  animation-delay: -12.4s;
}

li:nth-child(63) {
  animation-delay: -12.6s;
}

li:nth-child(64) {
  animation-delay: -12.8s;
}

li:nth-child(65) {
  animation-delay: -13s;
}

li:nth-child(66) {
  animation-delay: -13.2s;
}

li:nth-child(67) {
  animation-delay: -13.4s;
}

li:nth-child(68) {
  animation-delay: -13.6s;
}

li:nth-child(69) {
  animation-delay: -13.8s;
}

li:nth-child(70) {
  animation-delay: -14s;
}

li:nth-child(71) {
  animation-delay: -14.2s;
}

li:nth-child(72) {
  animation-delay: -14.4s;
}

li:nth-child(73) {
  animation-delay: -14.6s;
}

li:nth-child(74) {
  animation-delay: -14.8s;
}

li:nth-child(75) {
  animation-delay: -15s;
}

li:nth-child(76) {
  animation-delay: -15.2s;
}

li:nth-child(77) {
  animation-delay: -15.4s;
}

li:nth-child(78) {
  animation-delay: -15.6s;
}

li:nth-child(79) {
  animation-delay: -15.8s;
}

li:nth-child(80) {
  animation-delay: -16s;
}

li:nth-child(81) {
  animation-delay: -16.2s;
}

li:nth-child(82) {
  animation-delay: -16.4s;
}

li:nth-child(83) {
  animation-delay: -16.6s;
}

li:nth-child(84) {
  animation-delay: -16.8s;
}

li:nth-child(85) {
  animation-delay: -17s;
}

li:nth-child(86) {
  animation-delay: -17.2s;
}

li:nth-child(87) {
  animation-delay: -17.4s;
}

li:nth-child(88) {
  animation-delay: -17.6s;
}

li:nth-child(89) {
  animation-delay: -17.8s;
}

li:nth-child(90) {
  animation-delay: -18s;
}

li:nth-child(91) {
  animation-delay: -18.2s;
}

li:nth-child(92) {
  animation-delay: -18.4s;
}

li:nth-child(93) {
  animation-delay: -18.6s;
}

li:nth-child(94) {
  animation-delay: -18.8s;
}

li:nth-child(95) {
  animation-delay: -19s;
}

li:nth-child(96) {
  animation-delay: -19.2s;
}

li:nth-child(97) {
  animation-delay: -19.4s;
}

li:nth-child(98) {
  animation-delay: -19.6s;
}

li:nth-child(99) {
  animation-delay: -19.8s;
}

li:nth-child(100) {
  animation-delay: -20s;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  25% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
    transform: rotateY(360deg);
  }
}

改变90度后

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

html {
  background-color: black;
  font-size: 7px;
}

ul {
  transform: rotateZ(90deg);
  list-style: none;
  transform-style: preserve-3d;
}

li {
  animation: spin 12s linear infinite;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiNjMDM5MmIiLz48c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzM0OThkYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(46%, #c0392b), color-stop(47%, #3498db));
  background-image: -moz-linear-gradient(left, #c0392b 46%, #3498db 47%);
  background-image: -webkit-linear-gradient(left, #c0392b 46%, #3498db 47%);
  background-image: linear-gradient(to right, #c0392b 46%, #3498db 47%);
  box-shadow: -1.5rem 0 0 #c0392b, 1.5rem 0 0 #3498db;
  border-radius: 1rem;
  height: 1rem;
  margin: 1rem auto;
  position: relative;
  width: 25rem;
}

li:before,
li:after {
  background: #3498db;
  border-radius: 50%;
  content: '';
  height: 2rem;
  position: absolute;
  top: -0.5rem;
  width: 2rem;
}

li:before {
  background: #c0392b;
  left: -1rem;
}

li:after {
  right: -1rem;
}

li:nth-child(0) {
  animation-delay: 0s;
}

li:nth-child(1) {
  animation-delay: -0.2s;
}

li:nth-child(2) {
  animation-delay: -0.4s;
}

li:nth-child(3) {
  animation-delay: -0.6s;
}

li:nth-child(4) {
  animation-delay: -0.8s;
}

li:nth-child(5) {
  animation-delay: -1s;
}

li:nth-child(6) {
  animation-delay: -1.2s;
}

li:nth-child(7) {
  animation-delay: -1.4s;
}

li:nth-child(8) {
  animation-delay: -1.6s;
}

li:nth-child(9) {
  animation-delay: -1.8s;
}

li:nth-child(10) {
  animation-delay: -2s;
}

li:nth-child(11) {
  animation-delay: -2.2s;
}

li:nth-child(12) {
  animation-delay: -2.4s;
}

li:nth-child(13) {
  animation-delay: -2.6s;
}

li:nth-child(14) {
  animation-delay: -2.8s;
}

li:nth-child(15) {
  animation-delay: -3s;
}

li:nth-child(16) {
  animation-delay: -3.2s;
}

li:nth-child(17) {
  animation-delay: -3.4s;
}

li:nth-child(18) {
  animation-delay: -3.6s;
}

li:nth-child(19) {
  animation-delay: -3.8s;
}

li:nth-child(20) {
  animation-delay: -4s;
}

li:nth-child(21) {
  animation-delay: -4.2s;
}

li:nth-child(22) {
  animation-delay: -4.4s;
}

li:nth-child(23) {
  animation-delay: -4.6s;
}

li:nth-child(24) {
  animation-delay: -4.8s;
}

li:nth-child(25) {
  animation-delay: -5s;
}

li:nth-child(26) {
  animation-delay: -5.2s;
}

li:nth-child(27) {
  animation-delay: -5.4s;
}

li:nth-child(28) {
  animation-delay: -5.6s;
}

li:nth-child(29) {
  animation-delay: -5.8s;
}

li:nth-child(30) {
  animation-delay: -6s;
}

li:nth-child(31) {
  animation-delay: -6.2s;
}

li:nth-child(32) {
  animation-delay: -6.4s;
}

li:nth-child(33) {
  animation-delay: -6.6s;
}

li:nth-child(34) {
  animation-delay: -6.8s;
}

li:nth-child(35) {
  animation-delay: -7s;
}

li:nth-child(36) {
  animation-delay: -7.2s;
}

li:nth-child(37) {
  animation-delay: -7.4s;
}

li:nth-child(38) {
  animation-delay: -7.6s;
}

li:nth-child(39) {
  animation-delay: -7.8s;
}

li:nth-child(40) {
  animation-delay: -8s;
}

li:nth-child(41) {
  animation-delay: -8.2s;
}

li:nth-child(42) {
  animation-delay: -8.4s;
}

li:nth-child(43) {
  animation-delay: -8.6s;
}

li:nth-child(44) {
  animation-delay: -8.8s;
}

li:nth-child(45) {
  animation-delay: -9s;
}

li:nth-child(46) {
  animation-delay: -9.2s;
}

li:nth-child(47) {
  animation-delay: -9.4s;
}

li:nth-child(48) {
  animation-delay: -9.6s;
}

li:nth-child(49) {
  animation-delay: -9.8s;
}

li:nth-child(50) {
  animation-delay: -10s;
}

li:nth-child(51) {
  animation-delay: -10.2s;
}

li:nth-child(52) {
  animation-delay: -10.4s;
}

li:nth-child(53) {
  animation-delay: -10.6s;
}

li:nth-child(54) {
  animation-delay: -10.8s;
}

li:nth-child(55) {
  animation-delay: -11s;
}

li:nth-child(56) {
  animation-delay: -11.2s;
}

li:nth-child(57) {
  animation-delay: -11.4s;
}

li:nth-child(58) {
  animation-delay: -11.6s;
}

li:nth-child(59) {
  animation-delay: -11.8s;
}

li:nth-child(60) {
  animation-delay: -12s;
}

li:nth-child(61) {
  animation-delay: -12.2s;
}

li:nth-child(62) {
  animation-delay: -12.4s;
}

li:nth-child(63) {
  animation-delay: -12.6s;
}

li:nth-child(64) {
  animation-delay: -12.8s;
}

li:nth-child(65) {
  animation-delay: -13s;
}

li:nth-child(66) {
  animation-delay: -13.2s;
}

li:nth-child(67) {
  animation-delay: -13.4s;
}

li:nth-child(68) {
  animation-delay: -13.6s;
}

li:nth-child(69) {
  animation-delay: -13.8s;
}

li:nth-child(70) {
  animation-delay: -14s;
}

li:nth-child(71) {
  animation-delay: -14.2s;
}

li:nth-child(72) {
  animation-delay: -14.4s;
}

li:nth-child(73) {
  animation-delay: -14.6s;
}

li:nth-child(74) {
  animation-delay: -14.8s;
}

li:nth-child(75) {
  animation-delay: -15s;
}

li:nth-child(76) {
  animation-delay: -15.2s;
}

li:nth-child(77) {
  animation-delay: -15.4s;
}

li:nth-child(78) {
  animation-delay: -15.6s;
}

li:nth-child(79) {
  animation-delay: -15.8s;
}

li:nth-child(80) {
  animation-delay: -16s;
}

li:nth-child(81) {
  animation-delay: -16.2s;
}

li:nth-child(82) {
  animation-delay: -16.4s;
}

li:nth-child(83) {
  animation-delay: -16.6s;
}

li:nth-child(84) {
  animation-delay: -16.8s;
}

li:nth-child(85) {
  animation-delay: -17s;
}

li:nth-child(86) {
  animation-delay: -17.2s;
}

li:nth-child(87) {
  animation-delay: -17.4s;
}

li:nth-child(88) {
  animation-delay: -17.6s;
}

li:nth-child(89) {
  animation-delay: -17.8s;
}

li:nth-child(90) {
  animation-delay: -18s;
}

li:nth-child(91) {
  animation-delay: -18.2s;
}

li:nth-child(92) {
  animation-delay: -18.4s;
}

li:nth-child(93) {
  animation-delay: -18.6s;
}

li:nth-child(94) {
  animation-delay: -18.8s;
}

li:nth-child(95) {
  animation-delay: -19s;
}

li:nth-child(96) {
  animation-delay: -19.2s;
}

li:nth-child(97) {
  animation-delay: -19.4s;
}

li:nth-child(98) {
  animation-delay: -19.6s;
}

li:nth-child(99) {
  animation-delay: -19.8s;
}

li:nth-child(100) {
  animation-delay: -20s;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  25% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
    transform: rotateY(360deg);
  }
}

Answer 1

将此translateX(-50%)添加到RotateZ

transform: rotateZ(90deg) translateX(-50%);

在旋转的ul和以下CSS周围添加2个包装器

.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

html {
  background-color: black;
  font-size: 7px;
}

ul {
  transform: rotateZ(90deg) translateX(-100%);
  list-style: none;
  transform-style: preserve-3d;
}

li {
  animation: spin 12s linear infinite;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiNjMDM5MmIiLz48c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzM0OThkYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(46%, #c0392b), color-stop(47%, #3498db));
  background-image: -moz-linear-gradient(left, #c0392b 46%, #3498db 47%);
  background-image: -webkit-linear-gradient(left, #c0392b 46%, #3498db 47%);
  background-image: linear-gradient(to right, #c0392b 46%, #3498db 47%);
  box-shadow: -1.5rem 0 0 #c0392b, 1.5rem 0 0 #3498db;
  border-radius: 1rem;
  height: 1rem;
  margin: 1rem auto;
  position: relative;
  width: 25rem;
}

li:before,
li:after {
  background: #3498db;
  border-radius: 50%;
  content: '';
  height: 2rem;
  position: absolute;
  top: -0.5rem;
  width: 2rem;
}

li:before {
  background: #c0392b;
  left: -1rem;
}

li:after {
  right: -1rem;
}

li:nth-child(0) {
  animation-delay: 0s;
}

li:nth-child(1) {
  animation-delay: -0.2s;
}

li:nth-child(2) {
  animation-delay: -0.4s;
}

li:nth-child(3) {
  animation-delay: -0.6s;
}

li:nth-child(4) {
  animation-delay: -0.8s;
}

li:nth-child(5) {
  animation-delay: -1s;
}

li:nth-child(6) {
  animation-delay: -1.2s;
}

li:nth-child(7) {
  animation-delay: -1.4s;
}

li:nth-child(8) {
  animation-delay: -1.6s;
}

li:nth-child(9) {
  animation-delay: -1.8s;
}

li:nth-child(10) {
  animation-delay: -2s;
}

li:nth-child(11) {
  animation-delay: -2.2s;
}

li:nth-child(12) {
  animation-delay: -2.4s;
}

li:nth-child(13) {
  animation-delay: -2.6s;
}

li:nth-child(14) {
  animation-delay: -2.8s;
}

li:nth-child(15) {
  animation-delay: -3s;
}

li:nth-child(16) {
  animation-delay: -3.2s;
}

li:nth-child(17) {
  animation-delay: -3.4s;
}

li:nth-child(18) {
  animation-delay: -3.6s;
}

li:nth-child(19) {
  animation-delay: -3.8s;
}

li:nth-child(20) {
  animation-delay: -4s;
}

li:nth-child(21) {
  animation-delay: -4.2s;
}

li:nth-child(22) {
  animation-delay: -4.4s;
}

li:nth-child(23) {
  animation-delay: -4.6s;
}

li:nth-child(24) {
  animation-delay: -4.8s;
}

li:nth-child(25) {
  animation-delay: -5s;
}

li:nth-child(26) {
  animation-delay: -5.2s;
}

li:nth-child(27) {
  animation-delay: -5.4s;
}

li:nth-child(28) {
  animation-delay: -5.6s;
}

li:nth-child(29) {
  animation-delay: -5.8s;
}

li:nth-child(30) {
  animation-delay: -6s;
}

li:nth-child(31) {
  animation-delay: -6.2s;
}

li:nth-child(32) {
  animation-delay: -6.4s;
}

li:nth-child(33) {
  animation-delay: -6.6s;
}

li:nth-child(34) {
  animation-delay: -6.8s;
}

li:nth-child(35) {
  animation-delay: -7s;
}

li:nth-child(36) {
  animation-delay: -7.2s;
}

li:nth-child(37) {
  animation-delay: -7.4s;
}

li:nth-child(38) {
  animation-delay: -7.6s;
}

li:nth-child(39) {
  animation-delay: -7.8s;
}

li:nth-child(40) {
  animation-delay: -8s;
}

li:nth-child(41) {
  animation-delay: -8.2s;
}

li:nth-child(42) {
  animation-delay: -8.4s;
}

li:nth-child(43) {
  animation-delay: -8.6s;
}

li:nth-child(44) {
  animation-delay: -8.8s;
}

li:nth-child(45) {
  animation-delay: -9s;
}

li:nth-child(46) {
  animation-delay: -9.2s;
}

li:nth-child(47) {
  animation-delay: -9.4s;
}

li:nth-child(48) {
  animation-delay: -9.6s;
}

li:nth-child(49) {
  animation-delay: -9.8s;
}

li:nth-child(50) {
  animation-delay: -10s;
}

li:nth-child(51) {
  animation-delay: -10.2s;
}

li:nth-child(52) {
  animation-delay: -10.4s;
}

li:nth-child(53) {
  animation-delay: -10.6s;
}

li:nth-child(54) {
  animation-delay: -10.8s;
}

li:nth-child(55) {
  animation-delay: -11s;
}

li:nth-child(56) {
  animation-delay: -11.2s;
}

li:nth-child(57) {
  animation-delay: -11.4s;
}

li:nth-child(58) {
  animation-delay: -11.6s;
}

li:nth-child(59) {
  animation-delay: -11.8s;
}

li:nth-child(60) {
  animation-delay: -12s;
}

li:nth-child(61) {
  animation-delay: -12.2s;
}

li:nth-child(62) {
  animation-delay: -12.4s;
}

li:nth-child(63) {
  animation-delay: -12.6s;
}

li:nth-child(64) {
  animation-delay: -12.8s;
}

li:nth-child(65) {
  animation-delay: -13s;
}

li:nth-child(66) {
  animation-delay: -13.2s;
}

li:nth-child(67) {
  animation-delay: -13.4s;
}

li:nth-child(68) {
  animation-delay: -13.6s;
}

li:nth-child(69) {
  animation-delay: -13.8s;
}

li:nth-child(70) {
  animation-delay: -14s;
}

li:nth-child(71) {
  animation-delay: -14.2s;
}

li:nth-child(72) {
  animation-delay: -14.4s;
}

li:nth-child(73) {
  animation-delay: -14.6s;
}

li:nth-child(74) {
  animation-delay: -14.8s;
}

li:nth-child(75) {
  animation-delay: -15s;
}

li:nth-child(76) {
  animation-delay: -15.2s;
}

li:nth-child(77) {
  animation-delay: -15.4s;
}

li:nth-child(78) {
  animation-delay: -15.6s;
}

li:nth-child(79) {
  animation-delay: -15.8s;
}

li:nth-child(80) {
  animation-delay: -16s;
}

li:nth-child(81) {
  animation-delay: -16.2s;
}

li:nth-child(82) {
  animation-delay: -16.4s;
}

li:nth-child(83) {
  animation-delay: -16.6s;
}

li:nth-child(84) {
  animation-delay: -16.8s;
}

li:nth-child(85) {
  animation-delay: -17s;
}

li:nth-child(86) {
  animation-delay: -17.2s;
}

li:nth-child(87) {
  animation-delay: -17.4s;
}

li:nth-child(88) {
  animation-delay: -17.6s;
}

li:nth-child(89) {
  animation-delay: -17.8s;
}

li:nth-child(90) {
  animation-delay: -18s;
}

li:nth-child(91) {
  animation-delay: -18.2s;
}

li:nth-child(92) {
  animation-delay: -18.4s;
}

li:nth-child(93) {
  animation-delay: -18.6s;
}

li:nth-child(94) {
  animation-delay: -18.8s;
}

li:nth-child(95) {
  animation-delay: -19s;
}

li:nth-child(96) {
  animation-delay: -19.2s;
}

li:nth-child(97) {
  animation-delay: -19.4s;
}

li:nth-child(98) {
  animation-delay: -19.6s;
}

li:nth-child(99) {
  animation-delay: -19.8s;
}

li:nth-child(100) {
  animation-delay: -20s;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  25% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
    transform: rotateY(360deg);
  }
}

.rotation-wrapper-outer {
  display: table;
}

.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}

.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;
  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

<div class="rotation-wrapper-outer">
  <div class="rotation-wrapper-inner">
    <ul class="element-to-rotate">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Link to codepen

变换rotateZ后如何减小ul尺寸？

1 个答案: