标签: css-transforms

我正在使用这样的 CSS 过渡：

div
{
   -webkit-transform: rotate(0deg);
   -webkit-transition: -webkit-transform 2s;
}
div:hover
{
   -webkit-transform: rotate(720deg);
}

这有效地使 div 旋转 2 次，持续 2 秒。现在我想使用矩阵来旋转和缩放图像；但是矩阵不使用度数，而是使用 cos(a) 和 sin(a) 以及众所周知的 cos(0) = cos(360) = cos(720) 等。所以使用矩阵我无法更多地旋转图像超过 359 度。

所以我决定聪明一点，使用 JavaScript 从旋转元素 (720deg) 中获取矩阵，它看起来像这样：

-webkit-transform: matrix(1, -0.0000000000000004898587196589413, 0.0000000000000004898587196589413, 1, 0, 0);

然而，使用这个矩阵我无法旋转元素 - 我稍后会计算大小并应用它。

所以问题是 - 如何使用 css 3 矩阵变换将元素旋转超过 359 度？

我认为这比任何事情都更具学术性,但我有一个元素,我设置为无限旋转,在我的CSS文件中,我必须添加它(是的,我也有我的moz和webkit声明,但这里没有相关性)

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

在这里设置360似乎很奇怪,但它似乎与359一起工作.是360只相当于0还是什么？试图了解它的工作原理以及是否存在实际差异.

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child">
            lorem ipsum
        </div>
    </div>
</div>

CSS

.wrapper {
    width: 300px;
    height: 300px;
    margin: 30px auto;
    border: 1px dashed #ccc;
    overflow:hidden;
}

.parent {
    width: 1px;
    height: 100px;
    background-color: #f00;
    opacity: 0;
    margin: 0 auto;
    -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
}

.wrapper:hover .parent {
    opacity: 1;
    -webkit-transform: scaleX(300);
            transform: scaleX(300);
}

.wrapper . parent .child {
    -webkit-transform: none;
            transform: none;
}

我想在悬停.wrapper div时只缩放.parent元素.但它也会影响两个div(父级和子级),尽管为.child div提供transform:none属性.如何防止.child受到影响？

http://jsfiddle.net/cdmkoao4/1/

我使用以下css创建了一个倾斜的div

#outer-left{
-ms-transform: skew(-30deg,0deg); /* IE 9 */
-webkit-transform:skew(-30deg,0deg); /* Chrome, Safari, Opera */
transform: skew(-30deg,0deg);
background:#333333;
width:200px;
z-index:20;
border-bottom:3px solid #2E8DEF;
padding:10px 30px 10px 75px;
font-size:20px;
color:#2E8DEF;
position:relative;
left:-50px;
}
#outer-left:after{
content:"";
display:inline-block;
position:absolute;
width:20px;
height:100%;
background:#2E8DEF;
float:right;
right:0px;
top:0px;
z-index:10;
}

#inner-left{
-ms-transform: skew(30deg,0deg); /* IE 9 */
-webkit-transform: skew(30deg,0deg); /* Chrome, Safari, Opera */
transform: skew(30deg,0deg);
display:inline-block;
}

并使用两个div,即外部div来扭曲边框和div和内部div来取消文本的倾斜效果.

但是我在div3中只使用了一个div就达到了相同的效果

看小提琴:http://jsfiddle.net/5a7rhh0L/

如果我使用更多文本在div 3中执行相同操作则会失真.但在div2的情况下不是这样,使用2个div的文本更多.

我完全清楚这里发生了什么.我想知道DIV2是否只能使用一个div来实现,即<div id="inner-div">Context<br>Hello</div>现在不使用两个div,即内部和外部div.

我在这里有一个具有这种起始样式的 HTML 元素： transition: transform 2s;

首先，它通过单击添加的类进行动画处理（它旋转 X）。在下一次单击时，将添加另一个类，该类添加了一个应该垂直移动元素的transform3d，根据上述规则，这应该需要 2 秒。

该的Transform3D：除非我添加此规则的元素不会生效animation: none为好。我对animation: none实际做什么感到困惑。转换已应用动画的元素是否会出现复杂情况？

似乎通过obj.style.transform连续使用两种情况导致仅执行第一条语句。请看下面的代码。一个完整的例子在CodePen 上。

function animateObject(x, y, z){
    object = document.getElementsByClassName('cub-1')[0];

    object.style.transform = "rotateX(" + x + "deg)";
    object.style.transform = "rotateY(" + y + "deg)";
    alert("")
}

在完整示例中，我从包含对象的 x、y 和 z 位置的文本区域读取行，将值从弧度转换为度数，然后使用这些值为我的 3d 对象设置动画。

我想向我的站点添加一个新功能，该功能使用来自 David Walsh 站点的卡片翻转模式：https : //davidwalsh.name/css-flip。问题是，我卡片中的内容是可变的，所以高度是未知的（它也是一个响应式网站）。我的页面底部有一个页脚，它需要位于此区域下方，但由于这种方法依赖于绝对定位，因此页脚将像此代码笔一样位于顶部：https ://codepen.io/anon/pen /ALJmGZ

任何人都可以想到任何 css 黑客或对这种方法的更改，以使卡片不必绝对定位？

HTML：

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      <span class="name">David Walsh</span>
    </div>
    <div class="back">
      <div class="back-logo"></div>
      <div class="back-title">@davidwalshblog</div>
      <p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
    </div>
  </div>
  <footer>Here is my footer</footer>
</div>

CSS：

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;

    border: 1px solid #ccc;
}

    .flip-container:hover .flipper,  
  .flip-container.hover .flipper {
        -webkit-transform: …

我有一个常规的无序列表项目，display: flex并justify-content: space-between应用于它（因此，.first_item触及 的左边缘.list并.last_item触及 的右边缘.list）：

<ul class='list'>
    <li class='first_item'>Item</li>
    <li class='middle_item'>Item</li>
    <li class='last_item'>Item</li>
</ul>

但是，如果我使用 缩小项目transform: scale(0.5)，现在这两个位置有一个空间，就好像justify-content: space-between“不知道”项目已经减少一样。

这是不对的：即使在缩小项目时，第一个和最后一个项目仍应接触容器的左右边缘。

发生了什么以及如何解决这个问题？

我有一个正在动画的内联 SVG，但是当您在浏览器中放大或缩小时，正在旋转的对象不再在其中心点旋转。

它在 Chrome 中运行良好。

http://codepen.io/chrismorrison/pen/rmLXWw

#rays {
  animation: spin 6s linear infinite;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@keyframes spin {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
}

我有一个使用 CSS 构造的立方体。它由 6 个面组成，每个面都被变换为立方体的一个面，并且所有 6 个面都在一个<div>类下.cube。我对立方体所做的任何旋转都是在这个封闭cube类上完成的。

我希望立方体根据鼠标拖动输入旋转。到目前为止它有点工作。我只是将 x 和 y 鼠标移动转换为围绕 x 和 y 轴的立方体旋转。

但这有一个主要问题。我执行旋转作为一个简单的

transform: rotateX(xdeg) rotateY(ydeg)

CSS 属性。这样做的问题是 y 旋转轴随着 x 旋转而旋转。

假设我围绕 x 轴将立方体旋转 90 度。现在，如果我也尝试将立方体也沿 y 轴旋转 90 度，我希望立方体向右或向左旋转 90 度（从我的角度来看）。但相反，它围绕当前可见的正面旋转。也就是说，由于首先出现的 x 轴旋转，y 轴旋转了 90 度，所以现在从用户的角度来看，它看起来好像立方体围绕它的 z 轴旋转。

我希望能够以 xy 和 z 轴从用户的角度保持固定的方式旋转立方体。此外，立方体需要从当前状态旋转，以防用户将手指从按钮上抬起并再次单击并拖动。

我一直觉得这很难做到。我觉得仅使用rotateX/Y/Z属性可能无法做到这一点，而我可能必须使用 3d 矩阵或 rotate3d 属性？

我知道这可能不是使用 CSS 实现的最简单的事情，但我仍然想这样做。有人能指出我如何解决这个问题的正确方向吗？

transform: rotateX(xdeg) rotateY(ydeg)

#cube-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  perspective: 1500px;
}

.cube …