标签: css-transforms

问题:当使用"overflow:auto;"计算包含div的滚动条的scrollHeight和scrollWidth时,浏览器(FF5,Chrome12,IE9)会忽略应用于div内的子元素的css3转换.

<style type="text/css">
div{ width: 300px;height:500px;overflow:auto; }
div img {
-moz-transform: scale(2) rotate(90deg);
-webkit-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
}
</style>    
<div><img src="somelargeimage.png" /></div>

我已经在jsfiddle上进行了一个小测试,显示了不良行为.

http://jsfiddle.net/4b9BJ/

本质上我试图创建一个简单的基于Web的图像查看器使用css3转换旋转和缩放,并希望包含固定宽度/高度的div能够滚动查看它包含的图像的完整内容.

有没有一种智能的方法来处理这个问题,甚至是一个粗略的解决方法？任何帮助表示赞赏.

我试图给带有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, …

我在这里有一个非常基本的例子,我有一个固定的标题与其他元素一个接一个地堆叠,单个元素使用转换transform: rotate(360deg).

因此,当页面滚动时,只有转换后的元素才会越过固定栏,而其他元素则不会.那么问题是变换元素有默认z-index吗？

当您使用z-index: -1;了.transform_me它的表现正常

演示

CSS

.fixed {
    height: 30px;
    background: #f00;
    position: fixed;
    width: 100%;
    top: 0;
}

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

span {
    display: block;
    height: 100px;
}

注意:如果我们使用say z-index: 999;作为固定div,它将被解决,但这不是我想要的.

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: …

根据caniuse.com,对于那些同时支持CSS transition和CSS的浏览器transform,组合至少有三种不同的类型:

1. 那些需要-webkit-在两个前缀transition和transform(例如野生6,Android浏览器<4.4).
2. 那些只需要-webkit-前缀的transform(例如Chrome 3x).
3. 那些都不需要前缀的那些(例如FF和IE10/11).

如何安全地编写transition样式以便在每种类型中正确解析它们？我看到两个选择:

-webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms, transform 300ms;

要么

-webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms;
        transition: transform 300ms;

现在因为类型2和类型3浏览器,我需要为两者 -webkit-transform 和 transform.提供无前缀的转换.第一个选项的问题是我担心类型2和类型3浏览器将无法解析第二行,因为它们将始终包含无法识别的属性.问题是,浏览器如何处理transition整个transition样式中的无效属性 - 或者只是跳过无效属性？

我认为可以通过将它分成两个属性来减轻这种情况,这样如果一个不可解析,它就会被忽略.除了第二个选项有点冗长之外,我仍然想知道,在类型2浏览器的情况下,第三个transition是否是不可解析的并且将"重置" transition回到null.

一般来说,这些表现如何？此外,当Chrome 等人的时候,其中哪些是符合未来标准的.切换-webkit-transform到前缀少transform？

我需要一些帮助,试图了解它是如何transform-origin工作的,我已经完成了我的谷歌搜索,但找不到任何可以帮助我的具体用例的东西.这就是我想要实现的目标:

我有一个固定高度的固定页脚,我有两行旋转文本(左栏),我怎样才能完全控制它的位置？目前它从页脚顶部开始,完全在页脚之外,我设置了一个小提示来显示我当前的代码:http://jsfiddle.net/eury7f6f/

任何人都有任何想法如何实现我想要的？

.vertical-text {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

http://codepen.io/stevendavisphoto/pen/xGdQBY

.image {
  width:600px;
  height:200px;
  overflow:hidden;
}
.pane1,
.pane2,
.pane3,
.pane4 {
  height:100%;
  float:left;
  background-image:url('http://img06.deviantart.net/22c0/i/2013/256/a/e/san_francisco_skyline_by_stevendavisphoto-d6m7285.jpg');
  background-size:cover;
}
.pane1 {
  background-position:0 0;
  width:25%;
}
.folder1,
.folder2 {
  height:100%;
  float:left;
  -webkit-backface-visibility:hidden;
  -webkit-transition:all 1s linear;
  -webkit-transform-origin:left center;
}
.folder1 {
  width:50%;
  -webkit-transform: perspective(300px) rotateY(90deg);
}
.image:hover .folder1 {
  -webkit-transform: perspective(300px) rotateY(0deg);
}
.black {
  position:absolute;
  top:0;
  left:0;
  right:50%;
  bottom:0;
  background:black;
  opacity:0.5;
  z-index:99;
  -webkit-backface-visibility:hidden;
  transition:opacity 1s linear;
}
.image:hover .black {
  opacity:0;
}
.pane2 {
  background-position:33.33% 0;
  width:50%;
}
.folder2 {
  width:50%;
  -webkit-transform: perspective(150px) …

我希望我的标题有一个缩小效果,加载放大的内容,以及滚动它缩小.

我所做的是通过transform:scale(1.4)增加大小,滚动时我从scrollTop和header height计算一个百分比,然后我将它乘以0.4.问题是在滚动时屏幕开始振动,刻度不平滑.你知道我的代码有什么问题吗？或者你能告诉我实现这个目的的最佳做法是什么？

jQuery(document).ready(function(){
    function zoom_out() {
        var page_header_height = jQuery('#page-header-custom').outerHeight();
        var scroll_top = jQuery(window).scrollTop();
        var zoom_multiplier = 0.4;
        var multiplier = (zoom_multiplier*(1-((scroll_top-jQuery('#page-header-custom').offset().top)/page_header_height))) > 1 ? 1 : (zoom_multiplier*(1-((scroll_top-jQuery('#page-header-custom').offset().top)/page_header_height)));

        if(multiplier <= 1) {
            jQuery('#page-header-inner').stop(true, true).transition({ scale: 1/(1+multiplier), translate: '0, -50%'  });

            jQuery('#page-header-custom').stop(true, true).transition({
                scale: 1+multiplier
            });
        }
    }

    zoom_out();

    jQuery(window).on('scroll', function(){
        zoom_out();
    });
});

我创建了一个JSFiddle来实现它.

我有以下HTML和CSS代码来绘制多维数据集的顶部.所以它向下移动,我希望它能够像开放一样动画.我无法弄清楚如何转换顶部,以便它似乎打开.

我已经包含了多维数据集的整个代码.关于这一点,我希望顶部开放.

.pers500 {
  perspective: 500px;
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */

.container {
  width: 25%;
  margin: 0 auto;
  margin-top: 2em;
  border: none;
  animation-name: moveDown;
  animation-duration: 2s;
  animation-timing-function: linear;
  transform: translate(0px, 110px);
}
.cube {
  width: 70%;
  height: 70%;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  -webkit-perspective-origin: 150% 150%;
  -webkit-transform-style: preserve-3d;
}
.face {
  display: block;
  position: absolute;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px; …