我正在尝试删除 space 并且在侧面滑动和缓和的图像不会在纯 CSS 中缩放

Question

我试过，但图像还不能缩放。

一图胜千言。你会很容易地理解图像。我还提供了片段代码框。

左边的 3 个图像按比例递减，slide/ease 从右到左，向外，右边的 3 个图像按比例递减，slide/ease 从左到右，向外。

运行如您所见，片段框在红色图像和未缩放图像之间有 space。而且图像没有对齐。

.sliding-images
{
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  height: 70%;
  justify-content: center;
}

.sliding-images img
{
  transition: transform 1s;
  -webkit-transition: transform 1s;
  width: 12%;
}

.sliding-images img:nth-child(1)
{
  transform: scale(1.1)  translateX(270%);
  -webkit-transform: scale(1.1)  translateX(270%);
  transform-origin: right;
  -webkit-transform-origin: right;
  z-index: 1;
  -webkit-animation: slide-left 0.15s ease-out both;
          animation: slide-left 0.15s ease-out both;
}

.sliding-images img:nth-child(2)
{
  transform: scale(1.2) translateX(178%);
  -webkit-transform: scale(1.2) translateX(178%);
  transform-origin: right;
  -webkit-transform-origin: right;
  z-index: 2;
  -webkit-animation: slide-left 0.10s ease-out both;
          animation: slide-left 0.10s ease-out both;
}

.sliding-images img:nth-child(3)
{
  transform: scale(1.3) translateX(-87%);
  transform: scale(1.3) translateX(-87%);
  transform-origin: right;
  -webkit-transform-origin: right;
  z-index: 3;
  -webkit-animation: slide-left 0.5s ease-out both;
          animation: slide-left 0.5s ease-out both;
}

.sliding-images img:nth-child(4)
{
  transform: scale(1.4);
  -webkit-transform: scale(1.4);
  z-index: 4;
}

.sliding-images img:nth-child(5)
{
  transform: scale(1.3) translateX(-87%);
  -webkit-transform: scale(1.3) translateX(-87%);
  transform-origin: left;
  -webkit-transform-origin: left;
  z-index: 3;
  -webkit-animation: slide-right 0.5s ease-out both;
         animation: slide-right 0.5s ease-out both;
}

.sliding-images img:nth-child(6)
{
  transform: scale(1.2) translateX(-178%);
  -webkit-transform: scale(1.2) translateX(-178%);
  transform-origin: left;
  -webkit-transform-origin: left;
  z-index: 2;
  -webkit-animation: slide-right 0.10s ease-out both;
         animation: slide-right 0.10s ease-out both;
}

.sliding-images img:nth-child(7)
{
  transform: scale(1.1) translateX(-270%);
  -webkit-transform: scale(1.1) translateX(-270%);
  transform-origin: left;
  -webkit-transform-origin: left;
  z-index: 1;
  -webkit-animation: slide-right 0.15s ease-out both;
         animation: slide-right 0.15s ease-out both;
}

 @-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}

@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}

 @-webkit-keyframes slide-right 
 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
}

@keyframes slide-right 
{
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
}

  <div class="sliding-images">
    <img src="https://via.placeholder.com/432x864/fdc34f/FEFEFE?text=1">
    <img src="https://via.placeholder.com/432x864/3e72ff/FEFEFE?text=2">
    <img src="https://via.placeholder.com/432x864/222222/FEFEFE?text=3">
    <img src="https://via.placeholder.com/432x864/fe7b7b/FEFEFE?text=4">
    <img src="https://via.placeholder.com/432x864/24d366/FEFEFE?text=5">
    <img src="https://via.placeholder.com/432x864/afd33c/FEFEFE?text=6">
    <img src="https://via.placeholder.com/432x864/41c8b8/FEFEFE?text=7">
  </div>

Answer 1

您必须使用 calc 来计算准确的 width 和 translateX 位置。

查看剪辑后的代码。

.sliding-images
{
position:absolute;
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  height: 70%;
  justify-content: center;
}

.sliding-images img
{
  transition: transform 1s;
  -webkit-transition: transform 1s;
  width: calc(100%/7);
}

.sliding-images img:nth-child(1)
{
  transform-origin: right;
  -webkit-transform-origin: right;
  z-index: 1;
  -webkit-animation: slide-left 0.15s ease-out both,scale11 0.1s both;
          animation: slide-left 0.15s ease-out both,scale11 0.1s both;
}

.sliding-images img:nth-child(2)
{
  transform: scale(1.2) translateX(178%);
  -webkit-transform: scale(1.2) translateX(178%);
  transform-origin: right;
  -webkit-transform-origin: right;
  z-index: 2;
  -webkit-animation: slide-left 0.10s ease-out both,scale12 0.1s both;
          animation: slide-left 0.10s ease-out both,scale12 0.1s both;
}

.sliding-images img:nth-child(3)
{
  transform: scale(1.3) translateX(-87%);
  transform: scale(1.3) translateX(-87%);
  transform-origin: right;
  -webkit-transform-origin: right;
  z-index: 3;
  -webkit-animation: slide-left 0.5s ease-out both,scale13 0.1s both;
          animation: slide-left 0.5s ease-out both,scale13 0.1s both;
}

.sliding-images img:nth-child(4)
{
  transform: scale(1.4);
  -webkit-transform: scale(1.4);
  z-index: 4;
}

.sliding-images img:nth-child(5)
{
  transform: scale(1.3) translateX(-87%);
  -webkit-transform: scale(1.3) translateX(-87%);
  transform-origin: left;
  -webkit-transform-origin: left;
  z-index: 3;
  -webkit-animation: slide-right 0.5s ease-out both,scale13 0.1s both;
         animation: slide-right 0.5s ease-out both,scale13 0.1s both;
}

.sliding-images img:nth-child(6)
{
  transform-origin: left;
  -webkit-transform-origin: left;
  z-index: 2;
  -webkit-animation: slide-right 0.10s ease-out both,scale12 0.1s both;
         animation: slide-right 0.10s ease-out both,scale12 0.1s both;
}

.sliding-images img:nth-child(7)
{
  transform-origin: left;
  -webkit-transform-origin: left;
  z-index: 1;
  -webkit-animation: slide-right 0.15s ease-out both,scale11 0.1s both;
         animation: slide-right 0.15s ease-out both,scale11 0.1s both;
}

 @-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-100%/7));
            transform: translateX(calc(-100%/7));
  }
}

@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-100%/7));
            transform: translateX(calc(-100%/7));
  }
}

 @-webkit-keyframes slide-right 
 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(100%/7));
            transform: translateX(calc(100%/7));
  }
}

@keyframes slide-right 
{
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(100%/7));
            transform: translateX(calc(100%/7));
  }
}

@keyframes scale11 
{
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@keyframes scale12 
{
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes scale13 
{
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
}

<div class="sliding-images">
    <img src="https://via.placeholder.com/432x864/fdc34f/FEFEFE?text=1">
    <img src="https://via.placeholder.com/432x864/3e72ff/FEFEFE?text=2">
    <img src="https://via.placeholder.com/432x864/222222/FEFEFE?text=3">
    <img src="https://via.placeholder.com/432x864/fe7b7b/FEFEFE?text=4">
    <img src="https://via.placeholder.com/432x864/24d366/FEFEFE?text=5">
    <img src="https://via.placeholder.com/432x864/afd33c/FEFEFE?text=6">
    <img src="https://via.placeholder.com/432x864/41c8b8/FEFEFE?text=7">
  </div>

我正在尝试删除 space 并且在侧面滑动和缓和的图像不会在纯 CSS 中缩放

I am trying to remove the space and the images that slide and ease out on the sides do not scale in pure CSS

html

css

keyframe

css-transforms

css-animations