标签: 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能够滚动查看它包含的图像的完整内容.

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

我在这里有一个非常基本的例子,我有一个固定的标题与其他元素一个接一个地堆叠,单个元素使用转换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,它将被解决,但这不是我想要的.

我需要一些帮助,试图了解它是如何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) …

我把一个jsFiddle放在一起来说明我的问题:

http://jsfiddle.net/VbCcA/3/

我有一个功能,它将平移和缩放到指定的元素.这用于在漫画书中创建帧之间的过渡.

我使用jQuery的.animate()工作正常,但是我想在可用时使用css转换,因为它们在现代浏览器上表现得更好.

但是我似乎无法正确地重新创建相同的行为.

而不是在这里描述得不好,如果你看一下jsFiddle,你会看到两组控件,每个按钮对应一个"漫画"中的一个框架.jQuery动画控件正常运行,而css转换控件则没有.

问题似乎是在使用css-transforms缩放元素后测量offset()属性.

任何帮助将不胜感激.

注意:当将方法从.animate切换到转换时,您将需要'重新运行'jsFiddle,反之亦然,以便重置在函数运行时修改的CSS.

编辑:我刚刚更正了jSfiddle的链接...向已经查看过的人道歉.原始链接缺少示例代码的一部分.另外,为了澄清,我需要使用基于百分比的值,因为整个应用程序都是完全响应的.

是否可以在CSS中进行DLT？如果是这样,这是如何实现的？我想不出只使用一种方法transform: matrix......如果不可能,那么另一种方法是什么呢？

我试图实现的特殊效果是以类似于Safari的方式布局div:

所以,之前出现过这个问题,比如:翻译+ Canvas =模糊文本 ,这里:CSS翻译后是否可以"捕捉到像素"？

似乎没有任何关于这些链接的结论 - 或者我读过的任何其他文章.一些响应者并不认为这很重要,所以这就是为什么在我的情况下它是:Chrome 41.0.2272.104中的屏幕截图

Safari 8.0.4中的屏幕截图(10600.4.10.7)

在Safari中查看详细信息？(看看航天飞机图像中的结构,或第3幅图像中岩石的细节)

这些家伙的CSS是

width: 100%;
height: auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);

因此,在某些情况下 - translateY将以半像素结束.左边的第一个图像最终得到一个变换矩阵,如下所示:

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

目前,Chrome似乎很好地呈现了这一点(我看到一些人说不同的浏览器在不同的版本中创建了这个问题),但目前Safari正在解决这个问题.所以,我修复这个问题的假设是确保只有整个像素,我已经通过数学运算并在javascript中应用变换来完成,但是当在大量图像上运行时,这会花费更多的性能时间.

我尝试了一些像CSS一样的黑客攻击,比如使用scale3d但没有成功.如果有人有任何JS免费解决方案,我将非常感谢共享的知识.

我遇到了以下问题.

在我创建的这个网站上,我有一个位于页面底部的图库.如果我将鼠标悬停在拇指上,它们会疯狂地飞来飞去,这不是我想要的.它就像其他浏览器的魅力一样; 只有Microsoft Edge受到影响.

有人可以帮助我让图像按预期运行吗？

CSS看起来像这样:

.node-gallery {
   float: left;
   width: 150px;
   height: 150px;
   position: relative;
   margin: 0 60px 50px 0;
}

.node-gallery img {
   position: absolute;
   bottom: 0px;
}

.node-gallery .image1 {
   left: 0px;
   z-index: 3;
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -o-transition: all 0.2s ease
}

.node-gallery .image2 {
   left: 7px;
   height: 148px;
   z-index: 2;
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -o-transition: all 0.2s ease
}

.node-gallery .image3 {
   left: 14px;
   height: …

添加类似于transform:translate(0px, -45px)表行的CSS转换时,Internet Explorer(已测试10和11)和Microsoft Edge无法正确显示转换.

使用一些简单的代码作为示例:

<table style="width:500px;">
    <tbody>
        <tr style="height: 30px; background-color:red; color:white;">
            <td>1</td>
        </tr>
        <tr style="height: 30px; background-color:blue; color:white;">
            <td>2</td>
        </tr>
        <tr style="height: 30px; background-color:yellow; color:black; transform:translate(0, -45px);">
            <td>3</td>
        </tr>
    </tbody>
</table>

此屏幕截图显示了问题:第3行应位于第1行和第2行的顶部,但在IE/Edge中,它尚未移动.几乎任何其他现代浏览器都按预期运行.Microsoft指出IE 10+和Edge应支持(无前缀)转换,并且基于该标准,支持具有显示表行的元素.

有没有人知道为什么这不起作用？

我正试图在一个倾斜的div上创建一个局部阴影,尽可能接近这个创意.

现在我一直试图用伪元素(特别是之前)做这个,但我发现每当我扭曲它们应用的元素时,这些元素表现得很奇怪.即使z-index设置为-1,伪元素也会一直显示在div的顶部.无论我对z-index做什么,它都将保持在它之上.我希望它在它应用的div后面,并在下面的div前面,就像在广告中一样.

这是我的:: before代码和codepen的链接

CSS

/*! Shadows */
#test-title {
  position: relative;
}

#test-title:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

http://codepen.io/kathryncrawford/pen/WwWEma