使用 CSS 变换比例的画板样式布局

Question

我想让 .container 和 .box 从我点击的对象中放大和缩小。我运行遇到的问题是当我放大和缩小时，它从第一个 .box div 而不是我点击的那个开始和缩小。

每个 .box 都包含自己独特的内容，因此在 "Artboard" 视图（缩小）中查看此内容时，我希望人们能够看到该特定 .box 中包含的内容。当人们单击其中一个框时，我希望它缩小到 (1) 以覆盖视口。如果此人在第 4 个 .box 上并且他们单击 "Zoom Out"，我希望它从那个特定的 .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 时才适用。您可以创建一个 link，href 属性指向 #foobar，让按钮触发这个伪选择器。

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

这个方法的缺点是必须加id，加上links才能真正触发:target伪class.

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

使用 CSS 变换比例的画板样式布局

Artboard Style Layout Using CSS Transform Scale

html

javascript

css

jquery

transform