标签: transform

我有一个UIView(因而是一个CALayer),我试图在3D空间中扭曲或弯曲.也就是说,想象一下我的UIView是一个扁平的标签,我想要部分包裹啤酒瓶(不是360度左右,只是在一个"侧面").

我认为这可以通过对视图的图层应用变换来实现,但据我所知,此变换仅限于图层的旋转,缩放和平移.我在这里可能是错的,因为我的线性代数在这一点上是模糊的,至少可以这么说.

我怎样才能做到这一点？

我正在使用拖放的html5界面.当我拖动一个元素时,目标会获得一个css类,这使得它由于-webkit-animation而双向旋转.

@-webkit-keyframes pulse {
   0%   { -webkit-transform: rotate(0deg);  }
   25%  { -webkit-transform:rotate(-10deg); }
   75%  { -webkit-transform: rotate(10deg); }
   100% { -webkit-transform: rotate(0deg);  }
  }

.drag
{
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}

当我放下目标时,我希望它采用当前的旋转状态.

我的第一个想法是用jquery和.css(' - webkit-transform')方法检查css属性.但是这种方法只返回'none'.

所以我的问题是:有没有办法获得通过动画旋转的元素的当前度数值？

谢谢Hendrik

我是-moz-transform: translate(-283.589px, 0px)从dom做的element.style[vendor + 'Transform'].现在我想提取值-283.589px以在我的应用程序中使用它,但没有获得获取它的确切方法.如果我这样做console.log($('.slide').css("-moz-transform")),则将矩阵值返回为matrix(1, 0, 0, 1, -283.589px, 0px).在jquery中是否有合适的方法来直接获取值-283.589px.我不想做任何矩阵计算.

我正在尝试重现某种假 3D 视角。我怎样才能做一个CSS3变换，以某种方式我可以存档这种倾斜效果。

在Chrome中,我正在尝试旋转一个多维数据集,但在此之后,该方突然不是难以处理的,并且父元素似乎优先.但是,当我创建该元素时pointer-events: none,body标记是第一个元素,因此在旋转之后由于某种原因90deg它会失去它的相互作用.

但是,当我只旋转它时89.9deg,没有问题,我可以与侧面的元素进行交互,我尝试摆弄,translateZ但这没有帮助.

我在这里重新创建它:http: //jsfiddle.net/TrySpace/GxJLV/

并且,在Firefox中它工作得很好......

有谁熟悉这个错误/差异以及如何解决它？

- 似乎我正在旋转的容器元素失去了它的所有相互作用,因为该容器元素是检查器中的一个平面,它保存了3d元素,因此在从侧面看的平面上没有相互作用？

更新:http://jsfiddle.net/TrySpace/GxJLV/2/(89.9度仍有效...)

我有一个CSS问题; transform-origin在firefox中不起作用.该网站以chrome和safari为中心,但不在firefox上.

html {
transform: scale(0.9);
transform-origin: center top;
}

我的网站是http://test.lafsdesign.com/

如果你能帮助我解决这个问题,我将不胜感激.非常感谢你提前.

完整的CSS

@media screen and (max-width: 1240px) {
html {
zoom: 0.9;
-moz-transform: scale(0.9);
-moz-transform-origin: center top;
}
}
@media screen and (max-width: 1140px) {
html {
zoom: 0.8;
-moz-transform: scale(0.8);
}    
}
@media screen and (max-width: 1005px) {
html {
zoom: 0.7; 
-moz-transform: scale(0.7);
}
}
@media screen and (max-width: 880px) {
html {
zoom: 0.6; 
-moz-transform: scale(0.6);
}
}

我正在尝试制作多个嵌套的3D变换元素.即几个嵌套元素都具有3D变换和transform-style:preserve-3d属性.

但是,当元素具有overflow属性时,其所有祖先都会变平.

例如:

<style>
div{transform-style:preserve-3d;}
</style>

<div style="transform:rotateY(30deg) rotateX(-30deg);">
    <div style="transform:translateZ(30px)">
    <div style="transform:translateZ(30px)">
    <div style="transform:translateZ(30px);overflow:hidden"><!-- everything beyond here is flat -->
    <div style="transform:translateZ(30px)">
    <div style="transform:translateZ(30px)">
    <div style="transform:translateZ(30px)">
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
</div>

小提琴:http://jsfiddle.net/Lqfy3mgs/

我在Chrome和FF中测试了这个.是否有可能使祖先3D即使用overflow？

我有一组边界框形式的对象注释。我有这些边界框的 x,y 和 x2y2 坐标。我希望使用 Matlab 的 imresize 或 opencv/python INTER_AREA 预处理图像并调整它们的大小。没有问题，但我希望找到边界框坐标的新位置。

理想情况下，我应该能够从 INTER_AREA 获取变换矩阵并将其应用于坐标，但尽管我浏览了大量内容，但我看不到这样做的方法。

谢谢。

当我使用filter时出现问题:drop-shadow和transform:rotate(## deg)

我附上了一张图片和一个网址,以便您自己查看

请注意,它发生在chrome上.

为什么会发生这种情况？如何防止这种情况发生？

请关注

.wrap1,
.wrap2 {
  position: absolute;
  top: 20%;
  height: 40%;
  width: 40%
}
.wrap1 {
  -webkit-filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  -webkit-transform: rotate(5.696863186209043deg);
  filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  transform: rotate(5.696863186209043deg);
  left: 0;
}
.wrap2 {
  -webkit-filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  -webkit-transform: rotate(0deg);
  filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  transform: rotate(0deg);
  left: 50%;
}
.inner,
.inner_color {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: …

我目前有一份需要智能扫描的文档。

为此，我需要在任何背景下找到文档的正确轮廓，以便我可以对该图像进行扭曲的透视投影和检测。

这样做时面临的主要问题是文档边缘检测任何类型的背景。

到目前为止，我一直尝试使用函数 HoughLineP 并尝试在通过精明边缘检测的灰度模糊图像上找到轮廓。

            MORPH = 9
            CANNY = 84
            HOUGH = 25

            IM_HEIGHT, IM_WIDTH, _ = rescaled_image.shape

            # convert the image to grayscale and blur it slightly
            gray = cv2.cvtColor(rescaled_image, cv2.COLOR_BGR2GRAY)
            gray = cv2.GaussianBlur(gray, (7,7), 0)

            #dilate helps to remove potential holes between edge segments
            kernel = cv2.getStructuringElement(cv2.MORPH_RECT,(MORPH,MORPH))
            dilated = cv2.dilate(gray, kernel)

            # find edges and mark them in the output map using the Canny algorithm
            edged = cv2.Canny(dilated, 0, CANNY)
            test_corners = self.get_corners(edged)

            approx_contours = [] …