我经常被告知CSS 3D变换是Mobile Safari中的硬件加速,这让我想知道这意味着2D变换是不是？我可以想到他们没有理由,因为他们基本上都可以实现为3D变换,但我想知道.

如果事实证明2D变换不是硬件加速,那么任何关于为什么会有所了解的见解.

在FF和Chrome中查看此演示,然后删除:

-webkit-transform:translateZ(0px);

Fom css,再看看Chrome.

它还使Chrome机身容器具有min-width:100%切割内容(并非总是如此).

我需要-webkit-transform:translateZ(0px);防止Chrome中出现奇怪的怪异黑盒子导致同时使用transformX + Y过多的元素.

当以百分比移动对象时,CSS具有标准行为,该百分比表示其父容器(div)的维度.

使用CSS3时不是这样transform: translate3d().如果对X,Y或Z坐标使用百分比值,则百分比表示当前对象的尺寸,而不是其父对象的尺寸.

问题现在应该是显而易见的:如果我需要使用CSS3动画并将transform: translate3d()当前对象移动到其动态可调整大小的父级的维度内,我根本就不知道该怎么做.示例:using translate3d(100%, 0, 0)将按当前对象的物理宽度移动对象,而不是其包含的块.

有任何想法如何动态改变父母的维度,好吗？或者如何使用硬件加速使当前对象在其父级内进行转换translate3d()？

Mozilla Developer Network确认:百分比(转换中)是指边界框的大小.

请问有解决方法吗？

我试图用纯粹的css创建一个3D球体,但我无法生成所需的形状.我见过一个圆柱体,但我找不到任何创建实际球体的参考.

我目前的代码如下:

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.sphere {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: …

我在HTML中使用纯SVG代码设计了一个3栏图标.我正在使用CSS3变换将顶部和底部条形旋转为X形.问题是它们围绕自己的中心旋转,但我需要它们围绕图标的中心旋转.为了解决这个问题,我调整了他们的X/Y坐标.

这会导致Internet Explorer,Firefox和Safari出现很多错误问题.Chrome似乎没问题,但显然我想以"正确"的方式对其进行编码,因此它可以在所有浏览器中运行.

这是我的CodePen

HTML

<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80">
  <g class="icon">
    <rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141"/>
    <rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141"/>
    <rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141"/>
  </g>
</svg>

CSS

.hamburger { display:block; text-align:center; }
svg { cursor:pointer; }

.frstbar, .scndbar, .thrdbar {
  -webkit-transition: all 0.35s linear;
  -moz-transition: all 0.35s linear;
    -o-transition: all 0.35s linear;
    transition: all 0.35s linear;
}
#burgericon.open .frstbar {
  -webkit-transform: …

我试图让我的元素留在现场(过渡后).现在,翻译的位置是我想要的地方但是我的名字会重新回到报价上.我是否错过了一段代码,或者是否有一段代码可以实现这种快速恢复？

.blockquote {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 30px;
  line-height: 60px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.16);
  /*rgba(192, 241, 247, 0.15);*/
  height: 100px;
  text-align: center;
  padding-top: 40px;
  color: white;
  font-weight: 300;
  font-style: italic;
  transition: all 250ms ease-in-out;
}
.blockquote .blockquote2 {
  transition: all 250ms ease-in-out;
  font-size: 25px;
  line-height: 35px;
  width: 90%;
}
.blockquote .author {
  display: inline;
  margin-left: -150px;
  transition: all 250ms ease-in-out;
  font-family: "Roboto", sans-serif;
  color: #838eca;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 35px;
  opacity: …

我正在使用带有transform属性的CSS过渡来在添加和删除元素时缩小元素.

然而,这个问题的一个问题是这个属性不会影响其他元素的流动,所以看起来被删除的元素会缩小,然后其余的元素突然跳跃.

如果我要为高度属性设置动画而不是使用变换,那就没问题,但是在实际使用中我使用的是可变高度的元素,所以我不知道我可以在它们之间设置动画的高度.

编辑:人们建议动画height属性(不会如上所述)或max-height属性.该max-height物业将努力在一定程度上,但你不能对齐定时完美的过渡将继续调整max-height过去元素的实际高度财产,直到过渡时间结束.

这些方法的另一个问题是它不使用您可以使用transform属性实现的平滑动画.对象的变换将顺利进行,但是随着浏览器以不同方式呈现这些过渡,以下元素的移动将会断断续续.

这是一个JSFiddle我的意思(尝试添加然后删除元素,并看到元素被删除时的跳转):

var button = document.querySelector("button");
var box = document.createElement("div");

box.className = "box";
box.appendChild(document.createTextNode("Click to delete"));

button.addEventListener("click", function(e) {
  var new_box = box.cloneNode(true);

  new_box.addEventListener("click", function(e) {
    this.className = "box deleting";
    window.setTimeout(function(e) {
      new_box.remove();
    }, 1000);
  });

  this.parentNode.appendChild(new_box);
});

button {
  font-size: 20pt;
}
.box {
  font-size: 20pt;
  margin: 10px;
  width: 200px;
  padding: 10px;
  background: pink;
  transform: scale(1, 1);
  transform-origin: top left;
}
.deleting …

我正在研究React Native中的一些动画,我注意到在Android上,transform: [{ translateY: height }]并没有像在iOS上那样占据整个屏幕.在Android上它只需要它自己的高度.如何让Android动画看起来像iOS？

安卓:

iOS版:

我在Code Sandbox中设置了这个项目:

屏幕截图(如果更改视口大小,多维数据集将不会如此):

目标:

我的目标是能够将立方体彼此相邻或彼此顶部放置并保持堆叠,如填充卡车的后部:从卡车的深端开始,用盒子填充第一层,然后堆叠在顶部直到天花板; 在卡车装满之前,一直堆放在那些箱子前面.

此外,如果我们缩放屏幕,立方体的位置应该看起来仍然是彼此相邻的(在我的示例中,您可以看到不是这种情况).

我们可以使用Vue或Javascript来计算我们无法使用CSS计算的内容,但让我们尝试尽可能多地使用CSS.

数据:

我的标记是这样的:

<div class="container">
  <div class="cubes-container">
    <!-- for each cube --->
    <div class="cube-wrap" >
        <div class="cube depth cube-isometric">
          <div class="front-pane">cube 1</div>
          <div class="back-pane">back 1</div>
          <div class="top-pane">top 1</div>
          <div class="bottom-pane">bottom 1</div>
          <div class="left-pane">left 1</div>
          <div class="right-pane">right 1</div>
        </div>
    </div>
  </div>
</div>

将立方体放在第一个立方体的右侧并不是一个好主意,这只适用于某些分辨率:

.cube-wrap:nth-child(2) .cube {
    transform: translate3d(142.5px, 50px, 125px) rotateX(-30deg) rotateY(-45deg);
    transform-style: preserve-3d;
}

我左边的控件也不是很好.他们正在改变left和的top价值观.cube-wrap.如果输入数字,您可以看到立方体在移动.此外,如果添加一个立方体,您可以看到第三个立方体落在原点上.我打算使用这些控件来测试多维数据集的位置.

我尝试在容器上设置透视图以从该角度查看所有多维数据集:

.container {
  position: absolute;
  left: 240px;
  top: 0; …

我已经将基于Codrops的书页翻页动画重写为使用更少JavaScript的更轻量级版本。我的动画可以在Firefox（和Safari）中按需运行，但不能在Chrome中运行。

单击图片的右半部分获取下一张图片，Chrome不会在反面显示图片。出于演示目的，我设置 background: red并创建了div.helper-class-to-make-bug-visbile使其background: red可见。它仅在图片第一次翻转时发生。当我返回并再次翻转时，动画不再滞后。这很烦人，即使动画只在第一回合时滞后。

演示：https : //codepen.io/pizzabote/pen/xxxXmXN

如何解决此问题，使演示中的动画也能在Chrome中正常工作（第一次翻转图像而不会出现滞后现象）？还是这是Chrome中的错误？

我在macOS Mojave上使用的是Chrome版本78.0.3904.87（正式版本）（64位）。在Windows上，此Chrome版本的动画对我也不起作用。

HTML部分：

<div class="container">
    <div class="page" id="first">
        <div class="back">
            <div class="outer">
                <div class="content">
                    <img src="img/1.jpg">
                </div>
            </div>
        </div>
    </div>
    <div class="page" id="second">
        <div class="front">
            <div class="outer">
                <div class="content">
                    <img src="img/1.jpg">
                </div>
            </div>
        </div>
        <div class="back" id="third">
            <div class="outer">
                <div class="content">
                    <div class="helper-class-to-make-bug-visbile">
                        <img src="img/2.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page" id="fourth">
        <div class="front">
            <div class="outer">
                <div class="content">
                    <img src="img/2.jpg"> …