Question

我使用css透视图创建了这个snippet，我将在项目中使用它，但是第一行框有问题。

在第一行框中，我需要每个框的顶部边框线像底部边框线一样弯曲。就像第二排一样，它从[top＆amp; amp;底部]。

我使用的一些内容：

-webkit-perspective: /* Chrome, Safari, Opera */
-webkit-perspective-origin: /* Chrome, Safari, Opera */
perspective:
perspective-origin:

我的snippet link就在这里。

感谢。

Answer 1

您可以为主框设置负面原点（如果我理解了问题）：

If Err.Number <> 0 Then ...

＆＃13;

perspective-origin: 60% -50%;

＆＃13;

#main-box {
  position: absolute;
  left: 43%;
  top: 30%;
  transform: translate(-50%, -50%);
  height: 150px;
  width: 700px;
  margin: 50px;
  padding: 10px;
  /* border: 1px solid black; */
  -webkit-perspective: 150px;
  /* Chrome, Safari, Opera */
  -webkit-perspective-origin: 10% 10%;
  /* Chrome, Safari, Opera */
  perspective: 700px;
  perspective-origin: 60% -50%;
}

.box {
  z-index: 1;
  width: 150px;
  height: 120px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  text-align: center;
  -webkit-transform: rotateX(20deg);
  /* Chrome, Safari, Opera */
  transform: rotateX(20deg);
  transition-duration: .5s;
}

.box.second-row {
  top: 150px;
}

.box:nth-of-type(1),
.box:nth-of-type(6) {
  left: 0;
  -webkit-transform: rotateX(0deg) rotateY(20deg);
  /* Chrome, Safari, Opera */
  transform: rotateX(0deg) rotateY(30deg);
}

.box:nth-of-type(1):hover,
.box:nth-of-type(6):hover {
  left: 0;
  -webkit-transform: rotateX(0deg) rotateY(20deg) translateZ(100px);
  /* Chrome, Safari, Opera */
  transform: rotateX(0deg) rotateY(30deg) translateZ(100px);
}

.box:nth-of-type(2),
.box:nth-of-type(7) {
  left: 180px;
  -webkit-transform: rotateX(0deg) rotateY(15deg) translateZ(-68px);
  /* Chrome, Safari, Opera */
  transform: rotateX(0deg) rotateY(15deg) translateZ(-68px);
}

.box:nth-of-type(2):hover,
.box:nth-of-type(7):hover {
  left: 175px;
  -webkit-transform: rotateX(0deg) rotateY(15deg) translateZ(100px);
  /* Chrome, Safari, Opera */
  transform: rotateX(0deg) rotateY(15deg) translateZ(100px);
}

.box:nth-of-type(3),
.box:nth-of-type(8) {
  left: 340px;
  -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(-90px);
  /* Chrome, Safari, Opera */
  transform: rotateX(0deg) rotateY(0deg) translateZ(-90px);
}

.box:nth-of-type(3):hover,
.box:nth-of-type(8):hover {
  left: 340px;
  -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(100px);
  /* Chrome, Safari, Opera */
  transform: rotateX(0deg) rotateY(0deg) translateZ(100px);
}

.box:nth-of-type(4),
.box:nth-of-type(9) {
  left: 500px;
  -webkit-transform: rotateX(0deg) rotateY(-15deg) translateZ(-68px);
  /* Chrome, Safari, Opera */
  transform: rotateX(0deg) rotateY(-15deg) translateZ(-68px);
}

.box:nth-of-type(4):hover,
.box:nth-of-type(9):hover {
  left: 505px;
  -webkit-transform: rotateX(0deg) rotateY(-15deg) translateZ(100px);
  /* Chrome, Safari, Opera */
  transform: rotateX(0deg) rotateY(-15deg) translateZ(100px);
}

.box:nth-of-type(5),
.box:nth-of-type(10) {
  left: 680px;
  -webkit-transform: rotateX(0deg) rotateY(-20deg);
  /* Chrome, Safari, Opera */
  transform: rotateX(0deg) rotateY(-30deg);
}

.box:nth-of-type(5):hover,
.box:nth-of-type(10):hover {
  -webkit-transform: rotateX(0deg) rotateY(-20deg) translateZ(100px);
  /* Chrome, Safari, Opera */
  transform: rotateX(0deg) rotateY(-30deg) translateZ(100px);
}

.box:hover {
  z-index: 2;
  background-color: blue;
  transition-duration: .5s;
}

＆＃13;

https://codepen.io/gc-nomade/pen/BdWBNO甚至更多https://codepen.io/gc-nomade/pen/ayJodZ

CSS视角中的问题

1 个答案: