Question

我在div标签列表中有一个固定大小的div元素（100％宽度，在移动网站上使用）。点击后，我想全屏显示，所以我使用以下属性为其添加一个类： height: 100vh; width: 100%; position: fixed; top: 0px; left: 0px; transition: all 0.5s ease-in-out;。

问题是css转换从固定位置的原点（左上角）开始。

如何将固定尺寸的过渡效果设为100％w / h，以便从元素的中心进行css变换，从侧面推动其他元素（向上/向下）？

如果没有position:fixed; top:0px; left:0px;，转换会自然地发生（来自div的中心），但它只会将以下元素向下推，并且不会将屏幕置于全屏div上。

Answer 1

使用css zoom属性

CSS中的缩放属性允许您缩放内容

＆＃13;

var zoomFactor = 100;

function largeMe() {
  zoomFactor += 10;
  console.log(document.getElementById('center'));
  document.getElementById('center').style.zoom = zoomFactor + "%";
}

function smallMe() {
  zoomFactor -= 10;
  console.log(document.getElementById('center'));
  document.getElementById('center').style.zoom = zoomFactor + "%";
}

＆＃13;

#center {
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: #FFF;
  padding: 10px;
  border: 5px solid #CCC;
  z-index: 200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

＆＃13;

<center id='center'>
  ...elements
</center>
<button type='button' onclick='largeMe()'>
  Zoom In
</button>

<button type='button' onclick='smallMe()'>
  Zoom Out
</button>

＆＃13;

Fiddle here

Answer 2

在.banner {}

下添加这些内容

position: absolute;
left: 50%;
transform: translateX(-50%);

以及＃banner.zoom {}

下的这些内容

transform: translateX(0);

这是JSFiddle

当使用'position：fixed'时，如何从它的中心放大div元素？

2 个答案: