标签: css-transforms

我在网上搜索并发现了几种材料,但没有一种能够清楚地说明这个概念,至少对我而言.例如,w3schools说它定义了从视图中放置3D元素的像素数.完全理解它是如此抽象.有人可以用更生动易懂的方式告诉我吗？如果有一些图像来展示这个概念,那就更好了.

这是如何在使用我自己的鼠标滚轮smoothscroll时缩放到鼠标指针的后续问题？

我正在使用css变换将图像缩放到鼠标指针.我也使用自己的平滑滚动算法来插值并为鼠标滚轮提供动量.

随着Bali Balo在我之前的问题中的帮助,我已经成功地获得了90%的收益.

您现在可以将图像一直放大到鼠标指针,同时仍然具有平滑滚动,如下面的JSFiddle所示:

http://jsfiddle.net/qGGwx/7/

但是,移动鼠标指针时功能会中断.

为了进一步说明,如果我放大鼠标滚轮上的一个凹口,图像会缩放到正确的位置.对于我在鼠标滚轮上放大的每个凹口,此行为都会继续,完全按照预期进行.但是,如果在部分缩放后,我将鼠标移动到其他位置,功能会中断,我必须完全缩小才能更改缩放位置.

预期的行为是缩放过程中鼠标位置的任何变化都可以在缩放图像中正确反映.

控制当前行为的两个主要功能如下:

self.container.on('mousewheel', function (e, delta) {
        var offset = self.image.offset();

        self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
        self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;

        if (!self.running) {
            self.running = true;
            self.animateLoop();
        }
        self.delta = delta
        self.smoothWheel(delta);
        return false;
    });

此功能收集鼠标在缩放图像的当前比例下的当前位置.

然后它开始我的平滑滚动算法,导致为每个插值调用下一个函数:

zoom: function (scale) {

    var self = this;
    self.currentLocation.x += ((self.mouseLocation.x - self.currentLocation.x) / self.currentscale);
    self.currentLocation.y += ((self.mouseLocation.y - self.currentLocation.y) / self.currentscale);

    var compat = ['-moz-', '-webkit-', …

拥有SVG路径:

<path class='st8' d='M73.4,11.3c-6.3,0-6.4,3.6-6.4,3.6v18c0,0,0.6,3.3,6.4,3.3c5.8,0,6.6-3.3,6.6-3.3v-18 C80,14.9,79.7,11.3,73.4,11.3z M75,31.3c0,0-0.3,1.2-1.6,1.2c-1.3,0-1.4-1.2-1.4-1.2V16.6c0,0,0.3-1.3,1.5-1.3s1.5,1.3,1.5,1.3V31.3 z'/>

我试图从CSS转换它而不是transform从元素标签声明属性.

这个过程在webkit和firefox中运行良好,但是在IE9或10上进行测试时没有任何反应.

<svg>
    <style>
        .st8 {
            -webkit-transform: rotate(45deg); /* works on chrome and Safari */
            -moz-transform: rotate(45deg); /* works on firefox */
            -ms-transform: rotate(45deg); /* doesn't work on IE */
            transform: rotate(45deg);
        }
    <style>
    <path class='st8' d='M73.4,11.3c-6.3,0-6.4,3.6-6.4,3.6v18c0,0,0.6,3.3,6.4,3.3c5.8,0,6.6-3.3,6.6-3.3v-18 C80,14.9,79.7,11.3,73.4,11.3z M75,31.3c0,0-0.3,1.2-1.6,1.2c-1.3,0-1.4-1.2-1.4-1.2V16.6c0,0,0.3-1.3,1.5-1.3s1.5,1.3,1.5,1.3V31.3 z'/>
</svg>

我试图在网上搜索任何提到css转换确实不适用于IE的地方,但是我找不到它.因此我的问题是,确实不可能在IE上使用css转换吗？除了必须严格使用transform元素标记中的属性外,还有其他解决方法吗？

为了覆盖最广泛的浏览器和版本,为CSS添加前缀的正确方法是什么？

版本1:

-webkit-transition: -webkit-transform .3s ease-in-out;
   -moz-transition:    -moz-transform .3s ease-in-out;
    -ms-transition:     -ms-transform .3s ease-in-out;
     -o-transition:      -o-transform .3s ease-in-out;
        transition:         transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

或版本2:

-webkit-transition: transform .3s ease-in-out;
   -moz-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
     -o-transition: transform .3s ease-in-out;
        transition  transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

在我看来,当在转换属性上使用供应商前缀时,我还应该定位我想要转换的供应商前缀属性.

我真的找不到任何关闭.

我希望在圆圈内有一个方形图像.

当用户将鼠标悬停在图像上时,图像应缩放(放大).

圆圈应保持相同的大小.

仅在CSS过渡期间,方形图像与圆形重叠(好像溢出:隐藏不存在).

以下是Chrome和Safari中奇怪行为的演示:http: //codepen.io/jshawl/full/flbau

在Firefox中工作正常.

请查看演示

我有两个divs,第一个div用于显示滚动条,第二个div用于旋转内部内容div.

我的问题是,即使内部内容没有溢出,滚动条也会显示.

请检查演示并告诉我我在这里做错了什么以及如何克服这个问题或任何替代方法来实现这一目标.

HTML

<div style="width: 1096px; height: 434px; overflow: auto; position: relative; border:solid 5px #555555">
    <div id="RotationDiv">
        <img style="left: 54px; top: 337px; width: 326px; height: 422px; position: absolute;" src="http://fc01.deviantart.net/fs70/f/2012/304/6/b/walfas_custom___vending_machine_2_by_grayfox5000-d5jljhe.png" />
    </div>
</div>

CSS

#RotationDiv {
    -ms-transform-origin: 539px 539px;
    -webkit-transform-origin: 539px 539px;
    width: 434px;
    height: 1096px;
    overflow: visible;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color:Red;
}

在过去的几个小时里,我一直在努力弄清楚一个子元素如何定位于它的父元素而不是屏幕端口,即使它被定位为"固定".非常幸运的是,我偶然发现提到-webkit-transform: translate3d(0, 0, 0)父母可能会让事情变得糟糕.我正在使用bootstrap框架,因此他们确实将此属性放在.navbar-fixed-top父元素之一的类上.一旦我将其移除,孩子就开始重新定位视口.所以我有两个问题:

1. 为什么-webkit-transform: translate3d(0, 0, 0)要做这些讨厌的事情？
2. 为什么bootstrap家伙把这个属性放在.navbar-fixed-top课堂上？

更新
好吧,似乎我找到了第二个问题的答案.这是提交消息:

应用translate3d到modal,navbar-fixed和affix来对抗浏览器重绘

以下是第二个问题的答案:

对于变换,除了none之外的任何计算值都会导致创建堆叠上下文和包含块.该对象充当固定定位后代的包含块.

根据https://facebook.github.io/react/tips/inline-styles.html

CSS样式需要作为对象传递给组件.但是,如果您尝试使用转换样式,则会出现错误.

我有背面可见性的问题.它在Safari/Chrome中的运行方式非常有用,但由于某些原因它在Firefox中无法正常工作.

当盒子翻转时,我得到了正面的镜像.

当给出例如<div>盒子阴影以及旋转时,它将导致盒子阴影方向的旋转 - 当盒子阴影应该产生照明幻觉时,这是有问题的.

示例:https://jsfiddle.net/5h7z4swk/

div {
  width: 50px;
  height: 50px;
  margin: 20px;
  box-shadow: 10px 10px 10px #000;
  display: inline-block;
}
#box1 {
  background-color: #b00;
}
#box2 {
  background-color: #0b0;
  transform: rotate(30deg);
}
#box3 {
  background-color: #00b;
  transform: rotate(60deg);
}
#box4 {
  background-color: #b0b;
  transform: rotate(90deg);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#box6 {
  background-color: #0bb;
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

<div id="box1"></div>
<div id="box2"></div> …