使用 CSS 变换缩放的画板样式布局

Question

我希望 .container 和 .box 从我单击的那个中缩放。我遇到的问题是当我缩小和缩小时，它从第一个 .box div 开始缩小，而不是我点击的那个。

每个 .box 都将包含它自己独特的内容，因此在“画板”视图（缩小）中查看此内容时，我希望人们能够看到该特定 .box 中包含的内容。当人们单击其中一个框时，我希望它缩小到 (1) 以覆盖视口。如果此人在第 4 个 .box 上并且他们单击“缩小”，我希望它从那个特定的 .box 缩小。

每个框都是视口的大小，这就是它现在的设置方式。

有没有人只有 CSS 的解决方案？或者这是可以在 JS 中更好地完成的事情？我不是 JS 专家，我只是进入它，所以我很好奇是否有一些我可以在一些简单的 JS 中做的事情。

请看我的codepen：

http://codepen.io/jareko999/pen/eZGLZB

HTML

<div class="bar">
  <button class="zoomout" onclick="zoomOut()">Zoom Out</button> 
</div>

<div class="container">
  <div class="artboard">  
    <div class="box">
      <i class="fa fa-diamond"></i>
    </div>
    <div class="box">
      <i class="fa fa-bolt"></i>
    </div>
    <div class="box">
      <i class="fa fa-flag"></i>
    </div>
    <div class="box">
      <i class="fa fa-flask"></i>
    </div>
  </div> 
</div>

CSS

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  background: #e1e1e1;
  overflow-y: hidden;
}

.bar {
  position: fixed;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: white;
  padding: 14px 0;
  z-index: 1;
}

.zoomout {
  -webkit-appearance: none;
  border: none;
  outline: 0;
  width: 100px;
  height: 40px;
  margin: auto;
  background: black;
  color: white;
  border-radius: 10px;
  cursor: pointer;
}

.container {
  height: 100vh;
  width: 100%;
  transition: .2s ease-out;
  transform: scale(1);
}

.container-small {
  height: 100vh;
  width: 100%;
  transition: .2s ease-out;
  transform: scale(.7);
}

.artboard {
  height: 100%;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  background: #e1e1e1;
}

.box {
  padding-top: 44vh;
  box-sizing: border-box;
  text-align: center;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 4px #a9a9a9;
  background: linear-gradient(to right, #276cd6 , #00a651);
  transition: .2s ease-out;
  transform: scale(1);
}

.box-small {
  padding-top: 44vh;
  box-sizing: border-box;
  text-align: center;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 4px #a9a9a9;
  background: linear-gradient(to right, #276cd6 , #00a651);
  transition: .2s ease-out;
  transform: scale(.9);
  cursor: pointer;
}

.box i {
  color: #e1e1e1;
  font-size: 3em;
}

.overflow {
  overflow: hidden;
}

.remove {
  display: none;
}

::-webkit-scrollbar {
  width: 12px;
  height: 4px;
}

/* Track */

::-webkit-scrollbar-track {
    background: white;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background: #4099ff; 
}

JS

$(document).ready(function() {
   $('.container').addClass('overflow');
});

function zoomOut() {
  $('.bar').addClass('remove');
  $('.box').addClass('box-small');
  $('.container').removeClass('overflow');
  $('.container').addClass('container-small');
}

$('.box').click(function() {
  $('.bar').removeClass('remove');
  $('.box').removeClass('box-small');
  $('.container').addClass('overflow');
  $('.container').removeClass('container-small');

});

Answer 1

您想要实现的目标可以使用纯 CSS 方法来完成。 此方法依赖于使用位置哈希 (url.com#foobar) 和 :target 伪选择器。

:target 伪选择器允许您定位具有与位置哈希匹配的 id 的元素。例如，假设您有一个 id 为“foobar”的元素，#foobar:target 选择器仅在您导航到 url.com#foobar 时才适用。您可以使用指向#foobar 的href 属性创建一个链接，以使按钮触发此伪选择器。

在您的情况下，您可以在 #container 位置哈希匹配时应用缩小样式，并且仅显示与位置哈希匹配的幻灯片。

这种方法的缺点是你必须添加id，并添加链接才能真正触发:target伪类。

我的解释可能不太清楚，所以我放了这个演示： http://codepen.io/ntim/pen/ONxGJd