标签: css-transforms

我有两个mixin都转换为-webkit-transform:

.rotate(@deg) {
  -webkit-transform: rotate(@deg);
}

.scale(@factor) {
  -webkit-transform: scale(@factor);
}

当我一起使用它们时:

div {
  .rotate(15deg);
  .scale(2);
}

......他们(如预期的那样)显示为:

div {
  -webkit-transform: rotate(15deg);
  -webkit-transform: scale(2);
}

这似乎不是有效的CSS,因为第二个优先于第一个; 第一个被丢弃了.要组合transform条目,它应该是:

-webkit-transform: rotate(15deg) scale(2);

如何通过LESS生成这样的CSS,即多个transform正确组合的条目？

我正在transform根据其EXIF数据旋转图像.然后,我想通过将它装到它的父div来显示它"全屏".

问题是,max-width/ max-height和所有其他大小调整指令"忽略"旋转(这是正常的,根据transform规范,元素的转换在流程中被"忽略".

Jsfiddle:http://jsfiddle.net/puddjm4y/2/

div.top {
    position: fixed;
    width: 100%;
    height: 100%;
    border: 1px solid blue;
}
img {
    transform: rotate(90deg);
    max-width: 100%;
    max-height: 100%;
}

<div class="top">
    <img src="http://www.androidpolice.com/wp-content/uploads/2014/02/nexusae0_wm_DSC02232.jpg">
</div>

有没有办法实现这个目标？

我正试图将我的小脑圈包裹在3D CSS变换中,而我无法理解该scaleZ()函数的用途.

scale(),scaleX()并且scaleY()有意义:它们沿着指定的轴拉伸元素,沿着该轴将其尺寸乘以您提供的数字.

但scaleZ()似乎不同:

1. 它适用于元素的子元素
2. 它不会影响子元素的尺寸,因为HTML元素沿z轴没有任何尺寸(即,您不能使<div>"更厚").

WebKit博客说:

[ scaleZ()]影响转换子节点中沿z轴的缩放.

我无法弄清楚这在实践中意味着什么.任何人都可以提供解释,最好是一些示例代码吗？

我正在使用css变换比例在div上创建平滑缩放.问题是我希望能够获得与div相关的正确鼠标位置,即使在按比例放大时也是如此,但我似乎可以找出正确的算法来获取这些数据.我正在检索当前的比例因子

var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform);
scale = transform.a;

当我在不同比例设置下读取div的位置时,它似乎报告了正确的位置,即当我缩放div时,直到屏幕上的位置更大,左边的位置和顶部值是负的并且看起来是正确的,就像返回的比例值:

$("#zoom_div").position().left
$("#zoom_div").position().top

要获取当前鼠标位置,我将从click事件中读取x和y位置并取消偏移量.这在缩放值1(无缩放)时正常工作,但在缩放div时不能正常工作.这是我的基本代码:

$("#zoom_div").on("click", function(e){
    var org = e.originalEvent;

    var pos = $("#zoom_div").position();

    var offset = {
        x:org.changedTouches[0].pageX - pos.left,
        y:org.changedTouches[0].pageY - pos.top
    }

    var rel_x_pos = org.changedTouches[0].pageX - offset.x;
    var rel_y_pos = org.changedTouches[0].pageY - offset.y;

    var rel_pos = [rel_x_pos, rel_y_pos];
    return rel_pos;
});

我已经多次尝试将除法加法和从比例X/Y中减去比例因子,但没有任何运气.任何人都可以帮我弄清楚如何获得正确的价值.

(我已经简化了我原来的代码,希望能让我的问题更加清晰,你在上面的代码中找到的任何错误都是由于编辑失败.我的原始代码除了鼠标位置问题外).

为了说明我在说什么,我做了一个快速的jsfiddle示例,允许使用translate3d拖动div.当刻度正常时(1)div被拖动到点击它的位置.当div按比例放大时(2)它不再从点击的位置正确拖动.

http://jsfiddle.net/6EsYG/12/

例如,将2个div设置为绝对值,可以通过将第一个div的z-index设置为高于第二个div来将第一个div放在第二个div上.我们可以使用translateZ()或translate3d来实现这种行为吗？

我希望能够以下面的图像显示方式扭曲元素.

我一直在玩它,但似乎无法接近复制那个形状.

我的css代码是

transform:skew(30deg,30deg);

改造甚至是正确的方法吗？请让我知道最好的,最兼容浏览器的解决方案.

我正在尝试做的很简单:将一些SVG点缩放scale(0)到scale(1)使用vanilla js悬停兄弟元素时.它们是演示中的红色

这是基本的SVG设置

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
      x="0px" y="0px" viewBox="0 0 720 576" style="enable-background:new 0 0 720 576;" xml:space="preserve">
    <style type="text/css">
        .st3 {
            fill:red;
        }
        * {
            -webkit-transition:.3s;
            transition:.3s;
        }
    </style>
    <g id="Layer_4">
        <!-- Shield -->
        <path class="st8" d="M601,304.7c-32.4-15.4-68.6-24-106.8-24c-40.4,0-78.5,9.6-112.3,26.6c4.9,79.7,41.9,146.7,109.5,187.6
            C559.8,454.1,597,385.6,601,304.7z" />
        <path class="st9" d="M420.1,328.7c2.1-4.7,32.5-23.9,72.5-23.9c39.9,0,73.1,20,75.5,24.3c2.4,4.3,5.7,40-12.7,74.6
                c-19.7,36.9-53.5,50.1-61.8,50.4c-6.4,0.2-41.8-14.3-62.5-51.6C411.5,367.4,418,333.4,420.1,328.7z" />
        <circle class="st10" cx="494.9" cy="373.3" r="35.5" />
    </g>
    <g id="Layer_8">
        <!-- Dots on shield -->
        <circle class="st3" cx="578.8" …

注意:这个问题是关于输出的问题,而不是关于任何形状的创建.

我最近创建了一个形状:

.prog {
    position: relative;
    top: 20px;
    width: 150px;
    height: 120px;
    background: green;
    display: inline-block;
    transform: skewY(20deg);
    transform-origin: 0% 100%;
    transition: 0.8s ease;
}
.prog:before {
    content: "";
    position: absolute;
    left: 150px;
    width: 150px;
    height: 120px;
    background: red;
    transform: skewY(-40deg);
    transform-origin: 0% 100%;
    transition: 0.8s ease;
}

<div class="prog "></div>

在上面的片段中,绿色形状是.prog元素,并且是倾斜的.红色形状是:before第一个元素的伪元素.

我倾斜.prog(偏斜)到20度.现在,我需要:before-20deg.为此,我首先不得不疏忽它.然后将它进一步倾斜20度.
所以最终的skewY价值是-40deg.我应用了这个,并适当的transform-origins.

但问题是两个形状的顶点都没有对齐.他们应该,但他们不是.这是显示问题的图像:

黑色线条仅供参考.

现在更多!

我倾斜-20 -20而不是 …

我想让这张卡在悬停时缩放(包括其中的元素),但文本在转换过程中摇摆/抖动(当你悬停卡片时)并在缩放期间和之后变得模糊(有时,某些比率比其他比例更高) ,我认为是由于子像素值四舍五入).

如何在转型过程中消除这种摇晃和模糊？

• 我不关心IE浏览器,我只想让它在最新的Chrome中运行.

• 它似乎是由transition财产造成的.

Codepen#1: https ://codepen.io/x84733/pen/yEpYxX

.scalable {
  transition: 0.3s ease-in-out;
  box-shadow: 0 6px 10px rgba(0,0,0,0.14);
}
.scalable:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);  
}

.card {
  width: 100%;
  background: white;
  padding: 20px;
}

body {
  width: 50%; 
  height: 100%; 
  background: #999;
  padding: 20px;
}

<div class="card scalable">
  <div>here's some description</div>
</div>

更新:

我刚刚发现,当你以编程方式为它设置动画时,它不会抖动/抖动:

我能以某种方式使用JS吗？

Codepen: https ://codepen.io/anon/pen/LqXwOb ？editors = 1100

.anim {
  animation: scale 0.3s ease-in-out infinite alternate;
}

@keyframes scale { …

我正在尝试做这样的事情：

但是球似乎并没有通过环，而是越过了环。如何解决此问题？

body {
  height: 50em;
}

.ring {
  position: relative;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ffcf82;
  z-index: 9
}

@keyframes spinner {
  0% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
}

@keyframes translate {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-370px);
  }
}

.ring {
  animation-name: spinner;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  transform-style: preserve-3d;
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #14e78e; …