文章/答案/技术大牛

发布

社区首页 >问答首页 >转换后调整div的方法？

问转换后调整div的方法？
EN

Stack Overflow用户

提问于 2020-02-23 10:55:31

回答 1查看 96关注 0票数 0

我有一堆<div>作为概览窗口，供用户选择。它们需要保持一致，在彼此之间保持一定的差距。

为了达到这个目的，我尝试了以下方法：

1)在它们的公共父级上设置一个perspective值，然后使用transform: translateZ使它们看起来更小，并将它们向后发送。只有选定的div将被转换回0，并且看起来是正常大小的，其余的则保持转换。

问题:转换后无法自动对齐。

2)将其公共父级的display值设置为flex，从而对齐所有div。所选的div将缩放到更大的大小。

问题:看上去不像3d的。视觉丑陋，无助于认知负荷。

我仍然更喜欢这个方法，但是在转换这些div之后，我如何对齐它们呢？

div#container {
  perspective: 200px;
  position: relative;
}
div.window {
  transform: translateZ(-150px);
  position: absolute;
}
div#window-1 {
  left: 10px;
}
div#window-2 {
  left: 110px;
}

<div id="container">
  <div id="window-1" class="window">test</div>
  <div id="window-2" class="window">test2</div>
  <div id="window-3" class="window">test3</div>
  <div id="window-4" class="window">test4</div>
  <div id="window-5" class="window">test5</div>
</div>

css

flexbox

css-transforms

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-24 00:09:19

你不需要真正的3D来获得一些好的效果。使用柔性盒布局来简化子元素的布局和定位，以及一个简单的transform: scale(...)已经产生了很大的不同，没有任何JS。添加一些眼睛糖果，你会得到一些类似的片段(真的需要整页)。

不管怎么说，UPDATE我去“flexbox”的动机是，实际上您实际上只提供了很少的代码。此外，虽然我个人有一个快速的个人电脑，快速GPU和玻璃纤维200-500 fast连接，但这不是对许多其他人。创建一个CPU/GPU密集的网页可能最终会咬你的尾巴，因为他们往往会变得迟钝，抖动或完全缓慢(更不用说，过于复杂)。

我倾向于选择最短的路线从A到B，紧凑的代码，只有最低要求(和IE11兼容)。如果它运行在IE11上，那么它就在任何地方运行)。

因此，以这个答案为出发点，调整基本机制，以满足您的需要，并修改眼睛糖果同样。当你需要的时候，你总是可以求助于JS。

更新2

修改了代码，现在结合了一些3D悬停效果的3D布局。父母和孩子都是Flexbox容器，所以你可以在里面做任何事情。3D布局保持不变。

备注:错过了您的第一个评论:添加transform: scale(0.5)到子元素.

Pro TIPS

1)由于三维效应的影响，子元素可能会产生锯齿状(无锯齿)边缘。如果是这样的话，尝试向子元素添加一个透明的大纲，比如.container>* { ... outline: 1px solid transparent ... }。这在某种程度上强制了边缘的反扩散。注意:正常的轮廓是看不见的，“视力受损者”可能不会感到好笑。

2)添加了几个按钮，调用简单的一行JS来切换“自定义属性”以进行测试。

还添加了使用“线性方程y=mx+b”的通用响应页边距。

(320，64) p2(1920,144) (上/下间隔)和
(320，8) p2(1920,320) (左/右间隔)。

3)最重要的是:响应的html fontsize从14 p1到20 p1不等，y=mx+b也表示p1(320,14) p2(1280,20)。

var body = document.body;
function toggleBodyAttrib(a) { if (body.getAttribute(a)=='1') body.setAttribute(a,'0'); else body.setAttribute(a,'1'); }

html,body               { box-sizing: border-box } /* size calculations up to and including border */
*::before,*::after, *   { box-sizing: inherit    } /* use parental calculation preference */

html,body               { width: 100%; max-width: 100%; margin: 0 } /* personal prefs */
body                    { min-height: 100% } /* fill screen */

/* responsive main fontsize, y=mx+b: for p1(320,14) p2(1280,20) */
html { font-size: calc(0.625vmin + 0.75rem) } /* 14px to 20px */

/*
    responsive <body> padding
    
    y=mx+b for points:
    T/B: p1(320,64) p2(1920,144) => y = 0.5x   + 48   (64px on a 320 display, 144px on 1920)
    L/R: p3(320, 8) p4(1920,320) => y = 0.195x - 54.4 ( 8px on a 320 display, 320px on 1920)
*/
[padded="1"]        { padding: calc(5vh + 48px) calc(19.5vw - 54.4px) }
[debug="1"] *       { outline: 1px dashed purple }

[debug] #buttonList *,
[debug] #buttonList { outline: none } /* exceptions to the rule above */

#buttonList         { position: fixed; top: 1rem; left: 1rem } /* keep them in place */

.container {
    /* UPDATE: 3D definitions */
    position: relative; /* create stacking context */

    transform: perspective(400px) rotateX(20deg); /* Starwars */
    perspective-origin: center center; /* center looks most straight */
    transform-style: preserve-3d; /* Kids must maintain 3D look */

    display: flex;   /* default Flexbox layout: row of columns */
    flex-wrap: wrap; /* wrap to next line when no more space   */
    justify-content: space-between; /* evenly distribute inside given space */

    width  : 50%;    /* some preferred with */
/*    padding: 1rem;   /* inner spacing (obsolete: now using <body padded="1">) */
    margin : 0 auto; /* center container horizontally */
    cursor : default;
}

/* UPDATE 3D hover preps */
.container:hover>* {
    perspective: 500px; /* higher value means a `more straight view` */
    /* try 200px and 2000px */

    transition: all 100ms ease-in-out; /* some delay prevents element jitter/flicker */
    /* too slow for IE11 (can see swap from z-index 1 to z-index 2) */
}

.container>* { /* or .container>.window, but this is more generic */
    /* UPDATE needs z positioning */
    z-index: 1;

    display: flex;           /* ditto */
    justify-content: center; /* fbl center content in window */
    align-items: center;

    min-width : 5rem;       /* preferred size, square */
    min-height: 5rem;

    margin    : -0.75rem;   /* some negative margin to compensate 50% scale */
    transform: scale(0.5);  /* scale down 50% */

    /* eye-candy */
    background-color: white;

    border: 1px solid rgba(0,0,0,.1);

    border-radius: 3px;

    box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20),
                0px 1px 1px  0px rgba(0,0,0,.14),
                0px 1px 3px  0px rgba(0,0,0,.12);   /* GMC elevation 1dp */

}
.container>:hover {
    /* UPDATE added 3D transitions */
    z-index: 2;

    transform: scale(1.2) rotateX(-20deg) translateZ(50px);

    /* eye-candy */
    background-color: CornflowerBlue;

    box-shadow: 0px 3px  5px -1px rgba(0,0,0,.2),
                0px 5px  8px  0px rgba(0,0,0,.14),
                0px 1px 14px  0px rgba(0,0,0,.12);  /* GMC elevation 5dp */
}

/* back to normal size when 'click and hold' */
.container>:active { transform: scale(1) }

<body padded="1">
<div id="buttonList">
    toggles:
    <button onclick="toggleBodyAttrib('padded')">padding</button>
    <button onclick="toggleBodyAttrib('debug')" >debug  </button>
    <!-- add your own custom debugging [attribute] toggles -->
</div>

<div class="container">
  <div>test1</div>
  <div>test2</div>
  <div>test3</div>
  <div>test4</div>
  <div>test5</div>
  <div>test6</div>
  <div>test7</div>
  <div>test8</div>
  <div>test9</div>
  <div>test10</div>
  <div>test11</div>
  <div>test12</div>
  <div>test13</div>
  <div>test14</div>
  <div>test15</div>
  <div>test16</div>
  <div>test17</div>
  <div>test18</div>
  <div>test19</div>
  <div>test20</div>
  <div>test21</div>
  <div>test22</div>
  <div>test23</div>
  <div>test24</div>
  <div>test25</div>
  <div>test26</div>
  <div>test27</div>
  <div>test28</div>
  <div>test29</div>
  <div>test30</div>
  <div>test31</div>
  <div>test32</div>
  <div>test33</div>
</div>
</body>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60361460

复制

相似问题

问转换后调整div的方法？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问转换后调整div的方法？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问转换后调整div的方法？
EN