标签: transform

CSS text-transform在处理方面是否昂贵？在我看来,浏览器被迫做一些通常不需要的工作(如果你没有转换),但这是一个大量的处理？它会影响性能吗？

我希望在对其应用变换旋转后获取UIView的当前位置.我怎样才能做到这一点 ？

在UIView文档中,我发现了有关transform属性的内容:

"如果此属性不是标识转换,则frame属性的值是未定义的,因此应该被忽略."

我尝试使用中心和边界,但结果被翻译(即使没有对rotateView应用变换)

newView.center = rotatedView.center;
newView.bounds = rotatedView.bounds;
newView.transform = rotatedView.transform;

有人可以帮忙吗？

提前谢谢,文森特.

我正在创建一个需要修改目标应用程序的web.config文件的自定义程序包,但我的配置更改在安装后永远不会出现在目标应用程序中.

这是我的web.config.transform文件:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <appSettings>
    <add key="AppInstalled" value="false"/>
  </appSettings>
</configuration>

appSettings部分中的此键永远不会应用.

这是我的nuspec文件:

<?xml version="1.0"?>
<package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
  <metadata>
    <id>$id$</id>
    <version>$version$</version>
    <authors>$author$</authors>
    <owners>$author$</owners>
    <licenseUrl>http://mvcapp.codeplex.com/license</licenseUrl>
    <projectUrl>http://mvcapp.codeplex.com/</projectUrl>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>$description$</description>
    <tags>mvc app</tags>
  </metadata>
  <files>
    <file src="\bin\Release\MvcApp.MVC3.dll" target="lib" />
    <file src="NuGet\Content\ajax-loader.gif" target="Content" />
    <file src="NuGet\Content\web.config.transform" target="web.config" />
    <file src="NuGet\Views\Install\Index.aspx" target="Views\Install\Index.aspx" />
  </files>
</package>

这是我从VS 2010命令提示符运行打包项目的命令:

nuget pack mvcapp.csproj

有任何想法吗？

谢谢.

鼠标悬停时,我需要在150ms的间隔内逆时针旋转一个元素180˚,然后在鼠标移出时我需要将元素逆时针旋转回原来的0˚超过150ms.

我愿意使用CSS3,jQuery和JavaScript.

我使用Chrome,但我还需要让它适用于Firefox和Safari.不太担心IE.

我有一个列为6列37行的列联表数据矩阵.我需要应用Chi平方变换来给出行轮廓和柱轮廓以进行对应分析.

不幸的是,我被告知我将需要使用嵌套循环来转换数据并执行CA(而不是在R中使用更合理的方式).我得到了用于嵌套循环的结构:

transformed.data=data0

for (row.index in 1:nrow(data)) {
  for (col.index in 1:ncol(data)) {
    transfomed.data[row.index,col.index]=
       "TRANSFORMATION"[row.index,col.index]
  }
}

根据我的理解,通过使用嵌套循环,它将首先将"TRANSFORMATION"应用于行,然后应用于列.

我想要对数据进行的转换以获取行配置文件:

( X(ij)/ sum(X(i)))/sqrt(sum(X(j)))

虽然我想要对数据进行的转换以获得列配置文件:

( X(ij)/ sum(X(j)))/sqrt(sum(X(i)))

我将在嵌套循环的最后一行输入什么作为我的"TRANSFORMATION",以便输出我想要的配置文件转换.否则,如果我错过了解嵌套循环的要点,请描述它允许我做什么.

这是我的数据子集的代码:

matrix(c(15366,2079,411,366,23223,2667,699,819,31632,2724,717,1473,49938,3111,1062,11964)
,nrow=4,ncol=4,byrow=T)

所以单独使用这个子集我会期望第一行的行配置文件是:

0.002432689 0.0003291397 6.506803e-05 5.794379e-05

并且第一列的列配置文件为:

0.0009473414, 0.0132572344, 0.0572742202, 0.0132863528 

我正在尝试将一个元素放置在浏览器窗口的左侧和右侧,两个元素都包含一个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: …

我担心我不知道如何解释它以及我可以展示它.所以我设置了这个小提琴.

如您所见,导航菜单不在应有的位置.它应该精确地设置在头元素的底部边框和左边框.即bottom: 0和left: 0.但是,我设置了-90degs的旋转,显然nav元素上的绝对定位是在旋转之前发生的,或者更确切地说是在原始元素上发生,就好像旋转不存在一样.

我已经尝试使用:before和:after伪元素来尝试,看看我是否可以这样解决它.但我无法完全掌握这些伪元素.在这两种情况下,都绕过了旋转.(没有旋转,nav元素显然将自己定位在它应该的位置.)

这基本上是代码:

<div id="head">
    <div id="title">My Web</div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Something Else</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

没有什么花哨.

这就是CSS(它对这个问题很重要):

#head {
    position: relative;
}
nav {
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}
nav a {
    display: inline-block;
    padding: 0 9px;
}

它是如何工作的:你可以在Fiddle项目中看到这一点. …

我在最新的Firefox浏览器版本34(系统:Windows 7,屏幕宽度:1600px)中遇到问题.在将鼠标悬停在其上后,我使用缩放图像(在某些容器中)生效.我正在使用transform:scale(1.1) with transition:transform 0.3s ease-in-out.但是当我将鼠标悬停在图像上,并在图像放大之后......它会产生一些奇怪的1px变换.一些渲染浏览器的bug,但我希望现有的一些修复它.请帮忙!

最重要的CSS定义和HTML代码的一部分:

figure {
   display: block;
   overflow: hidden;
   position: relative;
   backface-visibility: hidden;
}
figure img {
   width: 100%;
   transform: scale(1);
   transition: transform 0.3s ease-in-out;
   }
figure:hover img {
   transform: scale(1.1);
}

 <figure>
     <img class="img-responsive" src="http://lorempixel.com/600/400/fashion/7">
 </figure>

带有bug的示例在线:http://templates.silversite.pl/test/jumpingimg/

我也看到有人可以解决它,但我不知道如何,例如http://demo.qodeinteractive.com/bridge/上的"我们最近的工作"框

正如我在标题中提到的那样,我不确定这是我和我的编码 - "技能",还是只是一个不合适的概念:

我可以更改H1和H2标签的第一行之后的行吗？

这是一个实验,所以不是太重要,我想像我的商业标志样式标题:第二行旋转180°:

H2:not(:first-line){-webkit-transform: rotate(-18deg);}

情况:

在我的特定情况下,我有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: …