css 样式转换答案

【问题标题】：css style transformcss 样式转换
【发布时间】：2015-09-22 04:05:02
【问题描述】：

我希望能够根据容器的大小相对于封闭窗口的大小来实现 css 转换属性。

使用以下代码，scaleCameraShutter() 被调用。为scaleCameraShutter()重写的代码确实会发生缩放，并且缩放是准确的。

这是唯一剩下的问题 = window 调整大小，container 也是如此。然后，我重新加载窗口，正确的缩放完全消失了。总之，缩放只是暂时的，不是永久的？？

由于该板在代码上蓬勃发展，因此 .css 规范位于底部...

$(window).bind('resize', function() {

    scaleCameraShutter();  // below, container is GLOBAL

});

我打电话：

function scaleCameraShutter() {

    // .width() returns "###px"

    // value before scaling
    var containerWidth = parseInt( container.width() );   
    var windowWidth    = parseInt( $(window).width() );

    var theScale = windowWidth/containerWidth;
    var maxContainerWidth = 480;

    if (windowWidth > maxContainerWidth)
    {
        theScale = maxContainerWidth/containerWidth;
    }

    // Let the Browser pick the parm it accepts:
    // IE 10 and Firefox
    container.css("-transform"       , "scale(" + theScale + ", " + theScale + ")");
    // IE 9
    container.css("-ms-transform"    , "scale(" + theScale + ", " + theScale + ")");
    // Firefox
    container.css("-moz-transform"   , "scale(" + theScale + ", " + theScale + ")");
    // Chrome and Safari
    container.css("-webkit-transform", "scale(" + theScale + ", " + theScale + ")");
    // Opera
    container.css("-o-transform"     , "scale(" + theScale + ", " + theScale + ")");

}

最后，这是css：

#container {
    position:  relative;

    margin:    0 auto;
    width:     30.00em;
    height:    22.50em;

}

【问题讨论】：

你能把你的代码示例发布到 plunker 之类的地方吗？
我真的向大家道歉......对 jsFiddle 非常陌生，只是添加了一个 jsFiddle 而不考虑它是公开的。希望这能结束它...jsfiddle.net/johnlove/yL2td3r2

标签： css-transforms

【解决方案1】：

据我所知，您只将一个值传递给 SCALE。尝试执行以下操作之一： scale(x,y) 定义二维比例变换
scale3d(x,y,z) 定义 3D 比例变换
scaleX(x) 通过给 X 轴一个值来定义一个比例变换
scaleY(y) 通过给 Y 轴一个值来定义一个比例变换
scaleZ(z) 通过给 Z 轴一个值来定义一个 3D 比例变换

http://www.w3schools.com/cssref/css3_pr_transform.asp

祝你好运。

【讨论】：

响应的祝福......不幸的是，我尝试了“scale（theScale，theScale）”，有和没有引号......甚至尝试了scale（10,10）或其他一些荒谬的＃ .结果 = 仍然没有。所以，看起来一些非常基本的东西是错误的。哦，我也试过使用 theContainer.css("-transform", scale(theScale, theScale))
你能更具体地说明你想在这里完成什么吗？你能展示一些演示吗？对不起，但不知道你想要什么，很难给你任何建议。
我的荣幸：lovesongforever.com/50 正如您在顶部看到的那样，是一个带有边框的框内的“相机快门”jQuery 插件。我想要做的是通过 scale(xxx, xxx) 缩小具有窗口宽度的 $('#container') 。只有使用这种方法，我才能单独留下影响快门效果的代码。换句话说，缩放将与 Safari 中发生的情况相同，例如，当用户放大和缩小时。事实上，我可以成功地使用适当的 css 规范来进行缩放，但是我必须更改 jQuery 插件代码。
嘿约翰！这可能就是你要找的：stackoverflow.com/questions/10808096/…
我真的向大家道歉......对 jsFiddle 非常陌生，只是添加了一个 jsFiddle 而不考虑它是公开的。希望这能结束它...jsfiddle.net/johnlove/yL2td3r2