标签: css-transforms

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

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

我正在尝试将一个元素放置在浏览器窗口的左侧和右侧,两个元素都包含一个ul带有CSS变换旋转的元素.我已经设法将.rotate-left其定位ul在左侧,但我无法将ul内侧定位.rotate-right到右侧.(如果不支持变换,则需要在从右到左的水平线上可见.)

CSS:

.rotate-left ul li,
.rotate-right ul li {
    display: inline;
}

.rotate-left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 10em;
    white-space: nowrap;
    background: silver;
}

.rotate-left ul {
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    height: 1.5em;
    margin: auto;
    background: red;
    -webkit-transform-origin: 0 50%;
       -moz-transform-origin: 0 50%;
    -webkit-transform: rotate(-90deg) translate(-50%, 50%);
       -moz-transform: rotate(-90deg) translate(-50%, 50%);
}

.rotate-right {
    position: fixed;
    top: 0;
    right: 0;
    bottom: …

我在我的项目中使用css 3d变换.我试图在几个其他元素的包含元素上应用新的转换.我也试图在其子元素之一上使用getBoundingClientRect.该容器中还包含其他元素.当容器具有transformcss属性的此值时:

translateZ(1026px) rotateX(-90deg) rotateY(180deg) translateZ(439.001px)

这element.getBoundingClientRect().top是某个子元素的含义:77.953109741210944根据chrome的开发人员工具,但是当我使用elementstab将`transform属性更改为:

translateZ(1027px) rotateX(-90deg) rotateY(180deg) translateZ(439.001px)

这是什么element.getBoundingClientRect().top:-75048.6484375可能导致这种情况的原因是什么？我没有发布任何代码,因为即使我通过控制台修改了值,也会发生这种情况.当我制作第translateZ一个类似于1000px的东西时,它仍然是大约77.即使它在0时,边界矩形的顶部在某处约为50-100.但是当它超过1026px时,这个元素似乎会跳到-80000左右.然而,在视觉上,元素看起来应该是并且不会在1027px处随机"跳跃".有人会说可能导致这种情况吗？

如果它是浏览器错误或其他什么,我使用chrome 32.0.1687.2 dev-m Aura

编辑:

这是一个jsfiddle链接:

http://jsfiddle.net/a6KxQ/2/

它将生成一个包含所有translateZ值和结果elt.getBoundingClientRect().top值的表.代码很乱,但是在输出的表格中,如果仔细查看它,你会发现,在某些时候,最高值会随机跳远,远远低于.然后它会很快恢复到恢复之前的价值.奇怪的.

小提琴可能需要很长时间才能加载.

我创建了css-cube并将其旋转:hover.

但它的旋转是基于立方体的一面!

我想从它的中心旋转它,就像在这个例子中一样.我正在尝试transform-origin属性但没有得到理想的结果.

我也尝试在一个立方体内放置一个中间飞机,但在那种情况下悬停不起作用!

.contain {
    width: 300px;
    height: 300px;
    -webkit-perspective: 500px;
    perspective: 500px;
    position: absolute;
}
.main {
    position:relative;
    width:100px;
    height:100px;
    margin:100px 100px;
    background:#07a;
    overflow:visible;
    transition: all linear,transform cubic-bezier(0.4, 0.25, 0.14, 1.5),background cubic-bezier(0.4, 0.25, 0.14, 1.5);
    transition-duration: 700ms;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: center center;
}

.main:hover{
    transform:rotateY(180deg);
}

.top, .right, .left, .bottom,.lid{
    position:absolute;
    width:100px;
    height:100px;
    z-indexd:999;
    transition:  all 1s ease;
}
.top {
    background:crimson;
    top:-100px;
    transform-origin : 50% 100%;
    transform:rotateX(-90deg); …

所以,之前出现过这个问题,比如:翻译+ 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免费解决方案,我将非常感谢共享的知识.

情况:

在我的特定情况下,我有3D相框图像和2D照片.我希望2D照片使用CSS3变换功能(旋转,缩放,偏斜)匹配3D帧.

问题:

我无法使用手动方法精确匹配两者,也就是输入旋转值并观察它的作用.

理想的解决方案#1

存在在线视觉工具,可以拖动照片的角落(就像Photoshop一样),它可以为您提供正确的CSS3变换值.

理想的解决方案#2

存在非可视化工具 - 与之前相同,但您手动输入4点坐标(图像角),它会为您提供正确的CSS3变换值.

真正解决这个问题

如果没有这样的工具(我的搜索没有找到),我希望有人尝试解释它背后的数学,这样我就可以自己计算 - 如果有可能的话？

我为你准备了JSFiddle演示: Demo

/* Main issue here */

.transform {
  transform: rotateX(34deg) rotateZ(13deg) rotateY(-10deg) scaleY(1) scaleX(1) skewY(0deg) skewX(0deg) translateY(0px) translateX(20px);
  transform-origin: 50% 0% 0;
}
/* Supporting styles */

.container {
  position: relative;
  width: 500px;
  height: 500px;
}
.frame,
.photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.photo {
  top: 50px;
  left: 95px;
  right: 65px;
  bottom: …

当CSS元素从原始位置转换出来时,它们transform-origin不会随之移动; 使所有后续的变换和旋转仍然源于它的原始transform-origin(下面的例子).

我知道有一种解决方法...那就是继续将所有新变换添加到前一个变换的右侧.像这样:transform: translateY ( -5rem ) rotate( 45deg ) translateY( -10rem ) rotate( 15deg )...等等.这似乎总是根据需要从当前元素的中心开始新的变换.

问题

当您使用此技术基于用户输入转换元素时,您将继续向DOM添加转换......无休止地.占用大量内存并导致其他不需要的滑动效果(可能).

这是一个动画,显示transform-origin每次转换后如何不移动到元素的中心:

'use strict';

function firstRotation() { 
  var v = document.getElementById( 'v-wrp' ),
      status = document.getElementById( 'status' )
      
  setTimeout( function() { 
    status.innerHTML = 'First, the V is rotated around it\'s central axis.\
                          The <b>transform-origin</b> is centered.';
    
    v.classList.add( 'first-rotation' );
    status.classList.add( 'update' );
  }, 1000 ); 
}

function firstTranslation() { 
  var v = document.getElementById( 'v-wrp' ), …

我试图缩放div,但保持内部元素在相同的位置和相同的大小.为此,我使用transform: scale(value)包装器和transform: scale(1/value)内部div.

问题是,当我改变比例时,内部div会发生变化.只有当包装纸的宽度/高度为奇数或不是整数时才会发生这种情况.对于包装器的均匀宽度/高度不会发生这种情况.

我的目标是让许多包装器的子元素与包装器一起缩放,但只有一个不包装.

看看这个例子,看看行动中的问题(悬停到比例).

示例没有问题,内部元素保持固定(容器的高度和宽度均匀):

https://jsfiddle.net/o16rau6u/5/

.wrapper {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: relative;
}

.bg {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.wrapper:hover {
  transform: scale(2);
}

.wrapper:hover .bg {
  transform: scale(0.5);
}

<div id="wrapper" class="wrapper">
  <div id="bg" class="bg"></div>
</div>

有问题的例子,内部元素在比例上移动一点(容器的高度和宽度是奇数):

https://jsfiddle.net/o16rau6u/6/

.wrapper {
  width: …

我使用CSS3和关键帧在播放按钮(这是一个锚标签)上有一个简单的"脉动"效果.

虽然它在Chrome和Safari中完美运行,但它似乎并不适用于Firefox.有谁知道为什么？

li > a {

    -webkit-animation: pulsate 3s ease-in-out;
    -moz-animation: pulsate 3s ease-in-out;
    -o-animation: pulsate 3s ease-in-out;
    animation: pulsate 3s ease-in-out;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.8, 0.8);
        -moz-transform: scale(0.8, 0.8);
        -o-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }

    50% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1.0;
    }

    100% {
        -webkit-transform: scale(0.8, 0.8);
        -moz-transform: scale(0.8, 0.8);
        -o-transform: scale(0.8, 0.8);
        transform: …

我filter: blur()在Chrome上遇到了问题.我曾经transform: translate3d(0, 0, 0)鼓励硬件加速,它大大提高了性能(我谨慎使用它).我有一个元素,我已将其设置before为具有背景图像和模糊.我已将其范围设置为超出其包含元素的范围.

以上是Chrome中发生的事情的屏幕截图.硬件加速版本在左侧,而非硬件加速版本在右侧.请注意,在左侧,模糊显示为带有柔化边缘.

看起来在Chrome中,当硬件加速时,元素会在模糊之前被溢出剪切,从而导致羽状边缘.

除了禁用硬件加速,这可以通过这种大半径模糊来消除性能,还有一种方法可以鼓励Chrome在裁剪之前执行模糊操作吗？

我在下面附上了一个示例测试用例.

谢谢!

      div {
        width: 200px;
        height: 200px;
        position: absolute;
        box-sizing: border-box;

        overflow: hidden;
        border: 2px solid red;
      }

      div::before {
        background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg);
        content: "";
        display: block;
        position: absolute;
        left: -200px;
        top: -200px;
        width: calc(100% + 400px);
        height: calc(100% + 400px);
        background-size: calc(100% + 400px) calc(100% + 400px);

        filter: blur(60px);
        -webkit-filter: blur(60px);
        z-index: 1;
      }

      #incorrect::before {
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: …