我需要获得几个不同元素的实际高度(为了精确定制工具提示定位),并且这些元素中的一些(不是全部)被旋转.$(elem).outerHeight()返回原始高度,而不是实际显示的高度.

这是一个非常简单的例子:http://jsfiddle.net/NPC42/nhJHE/

我在这个答案中看到了一个可能的解决方案:https://stackoverflow.com/a/8446228/253974,但我仍然希望有一种更简单的方法.

我正在尝试用CSS3 3D Transform构建一个立方体..

在这个例子中,我只有两张脸:

<section id="header-cube-container">
    <div id="header-cube">
        <figure></figure>
        <figure></figure>
    </div>
</section>

对于其他所有浏览器,我都获得了不错的结果,但IE 11很奇怪.

我有一个很好的3D平移并在绿色面上旋转(1),但红色面(2)垂直不显示在3D中.这只是红脸在绿脸上的投影.

你可以在这个小提琴上看到结果.

PS:我旋转100度而不是90度,看到红色面在绿色面上的投影(如果角度为90,投影不可见).

谢谢你们!

有没有办法保持"Hello"元素固定？因此,当用户向上或向下滚动时,hello元素不会从其位置移动.

这是一个例子:http://jsfiddle.net/VR5P8/

这是CSS:

#hello {
position: fixed;
border: 1px solid #000;
height: 100px;
width: 100px;
background-color: white;
}

这是"Hello"元素的包装器的代码:

-webkit-transform: translate(394px, 0px);

我注意到在以这两种方式转换文本时存在很大的质量差异:

.text1 {
  width: 200px;
  height: 22px;
  position: absolute;
  top: 40%;
  left: 0;
  transform-origin: 50% 50%;
  transform: scale(2); /* here */
  color: red;
  text-align: center;
  font-size: 22px;
}
.text2 {
  width: 200px;
  height: 22px;
  position: absolute;
  top: 60%;
  left: 0;
  transform-origin: 50% 50%;
  transform: translateZ(400px); /* here */
  text-align: center;
  font-size: 22px;
}
.perspective {
  width: 200px;
  height: 200px;
  perspective: 800px;
  transform-style: preserve-3d;
}

<div class="perspective">
  <div class="text1">Text</div>
  <div class="text2">Text</div>
</div>

在Z轴上移动文本时,有没有办法强制渲染更好的渲染？

我的问题很简单,但我无法弄清楚它的来源.

我有一个按钮.当我点击它时,它会向左滑动,另一个按钮取代它,并带有CSS动画.
这是我的代码:

.form-anim-right-click {
  position: relative;
  overflow: hidden;
}
.form-anim-right-click > .form-group {
  width: 200%;
}
.form-anim-right-click > .form-group > .btn {
  width: 50%;
  display: inline-block;
  float: left;
  -o-transition: transform 0.3s ease-out;
  -webkit-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.form-anim-right-click > .form-group > .btn:focus {
  -o-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.form-anim-right-click > .form-group > .btn:focus + .form-slide {
  -o-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, …

已在Google Chrome 73（正式版）（64位）中经过测试。

还在最新的稳定版Mozilla，Opera和Safari中进行了测试。

看来这只是Chrome的错误。希望有解决方法，直到Chrome小组修复该错误为止。

演示版

我创建了Codepen来显示问题。

const div = document.querySelector('div');

const cssTransition = 2500;
const states = [
  ['INITIAL', 'translate(0)', cssTransition / 2],
  ['A', 'translate(0, 100px)', cssTransition + 500],
  ['B', 'translate(100px, 100px)', cssTransition / 2],
];

let cursor = 0;

const animate = () => {
  cursor = (cursor + 1) % states.length;
  const [name, value, delay] = states[cursor];
  setTimeout(() => {
    div.innerText = name;
    div.style.transform = value;
    animate();
  }, delay);
};

animate();

div {
  width: 100px; …

我试图给带有css3属性的文本赋予弧形,并且还改变js以支持ie8.但这不起作用.

this.$letters.each(function (i) {
    var $letter = $(this),
        transformation = (_self.options.radius === -1) ? 'none' : 'translateX(' + $letter.data('x') + 'px) translateY(' + $letter.data('y') + 'px) rotate(' + $letter.data('a') + 'deg)',
        transition = (animation) ? 'all ' + (animation.speed || 0) + 'ms ' + (animation.easing || 'linear') : 'none';


    filterIE = 'M11=' + $letter.data('x') + ', M21=' + $letter.data('y') + ',rotation=' + $letter.data("a") + 'deg'; // js function for supporting ie8
    //alert(filterIE);
    $letter.css({
        '-webkit-transition': transition,
        '-moz-transition': transition,
        '-o-transition': transition, …

http://jsfiddle.net/chovy/enmxu/

<a href="#">Inbox</a>

a { text-decoration: none; }
a::after { content: ' ?'; transform: rotate(180deg); }

根据这个网站,它已在Chrome 23中修复...但我有Chrome 28,它不起作用.

http://css-tricks.com/transitions-and-animations-on-css-generated-content/ http://trac.webkit.org/changeset/138632

我制作了CSS立方体,我正在使用上/下和左/右键旋转,但我在旋转方向上遇到了问题.

尝试#1

DEMO

使用本文,我设法绑定键并将旋转应用于多维数据集.我的第一个问题是CSS transform函数旋转元素轴,所以,即.我按下,Y轴和Z轴改变位置.我为这种情况调整了原始代码,但另一个问题是,因为轴是向量,当我按下2次X和Z回到位但矢量被反转(左键开始向右旋转立方体,反之亦然),所以现在我必须在相反的方向旋转立方体以获得所需的结果,我不知道如何检测轮轴是否倒置.

JavaScript的

var xAngle = 0,
    yAngle = 0,
    zAngle = 0,
    cube = $("#cube");

$(document).keydown(function(e) { //keyup maybe better?

  e.preventDefault();

  var key = e.which,
      arrow = {left: 37, up: 38, right: 39, down: 40},
      x = xAngle/90,
      y = yAngle/90;

    switch(key) {
      case arrow.left:
        if (x%2 == 0)
          yAngle -= 90;
        else
          zAngle += 90;
      break;
      case arrow.up:
        if (y%2 == 0)
          xAngle += 90;
        else
          zAngle -= 90;
      break;
      case arrow.right: …

我有一个太大的组件，我想缩小它。我可以通过比例变换来做到这一点，但父容器不会缩小以适应。

在我的真实代码中，带有 SHRINK-ME 类的 div 实际上是一个 Angular 日历组件，但是这个简化的repo再现了相同的效果。我不能只缩放环绕父 div，因为我需要使用 Bootstrap 列网格类来容纳此示例中省略的对象。我在这里缺少一个简单的 CSS 属性吗？

.parent {
  background-color: green;
}

.parent .child-object {
  height: 10em;
  background-color: red;
}

.sibling {
  background-color: yellow;
}

.SHRINK-ME {
  transform: scale(.80) translate(-12.5%, -12.5%);
}

<div class='row no-gutters'>
  <div class='parent col-vs-12 col-sm-6'>
    <div class='child-object SHRINK-ME'>CHILD</div>
  </div>
  <div class='sibling col-vs-12 col-sm-6'>SIBLING</div>
</div>

我的代码有和没有转换：

.parent {
  background-color: green;
  width: 40%;
}

.parent .child-object {
  height: 10em;
  background-color: red;
}

.sibling {
  background-color: yellow;
}

.SHRINK-ME {
  transform: …