Question

我正在尝试使以下CSS响应，特别是使其在手机屏幕上起作用。

我认为这是因为书本的尺寸以px为单位（我没有包括这部分CSS），但是我认为可以使用vh / vw或％来解决div。

请参见下面的代码：

@-webkit-keyframes rotatingAnimationX {
  0%{
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}
@keyframes rotatingAnimationX {
  0%{
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}
@-webkit-keyframes rotatingAnimationY {
  0%{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotatingAnimationY {
  0%{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes rotatingAnimationZ {
  0%{
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes rotatingAnimationZ {
  0%{
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

.containerp {
  /*width: 100vw;*/
  height: 100vh;
  overflow: hidden;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  /*display: flex;*/
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  /*justify-content: center;*/
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.containerp > div {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.boockup {
  -webkit-transform: rotateX(29deg) rotateY(-88deg) rotateZ(0deg);
  transform: rotateX(29deg) rotateY(-88deg) rotateZ(0deg);
}
.book-container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: 30s rotatingAnimationY linear infinite;
  animation: 30s rotatingAnimationY linear infinite;
}
.book-container > div {
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

任何帮助，我们将不胜感激。谢谢！

Answer 1

要使其具有响应性，您将需要使用：

百分比 vw（视口宽度） h （视口高度）还有@media（）（媒体查询）

我发现的一个窍门是，如果要保持缩放比例，请同时在宽度和高度上使用vw。
例如：您有一个600像素宽和150像素高的图像。

$projects

//上面的图像显示为600 x 150 px

null

///当屏幕尺寸小于600像素时，图像将更改为100vw x 25 vw，并保持4：1的比例。

使CSS敏感的问题

1 个答案: