我有一个元素:
elem
transform translateY(5px) scale(1.2)
现在悬停我希望它再向下移动5px
elem:hover
transform translateY(5px)
显然这会覆盖以前的转换.无论如何设置它移动额外的5而不知道前一个转换状态是什么？
谢谢.
我需要在Python中的一些非常复杂的XML和平面文件格式之间进行双向转换.我已经过时了,不知道人们在2011年的未来一年中如何解决这个问题.
我已经回到了各种Python XML库的最新版本,但是自从我上次在XSLT中度过了8年之后,我在谷歌搜索后仍然很惊讶,这仍然很常见.
那么你如何进行复杂的XML数据转换呢？
我想在Python中这样做,因为文档不是直接映射,并且需要一些处理和计算.但我仍然希望尽可能多地传递给规则引擎.
编辑:要明确我对技术感兴趣比特定的库或工具更多,但请发布它们.我在努力避免使用这里的单词模式,但这肯定是一个常见的问题.
编辑2:我仍然认为对于一般技术没有任何好的答案,但我使用Bots EDI框架进行文档翻译时解决了原来的问题.它非常注重EDI,但可用于通用翻译.虽然这是一个重量级的解决方案.
当我尝试使用D3.js库正确执行旋转动画时,我遇到了麻烦.问题与我想要旋转元素的点有关.
这是我用来表示我的意思(慢动作)的小提琴:http://jsfiddle.net/74mCb/
似乎问题的根源在于:
.attr("transform", "rotate(-60, 150,130)");
然后我像这样旋转它:
.attr("transform", "rotate(40 150,130)");
我希望针的屁股保持在适当的位置(成为旋转的中心),有人可以解释一下我做错了什么吗？
谢谢!
考虑以下尝试将一个段落旋转90度并将其定位,使得最初位于其左上角的角(因此在旋转后成为其右上角)最终位于该角的右上角.父块.
HTML:
<!DOCTYPE html>
<html>
<body>
<div id="outer">
<p id="text">Foo bar</p>
</div>
</body>
</html>
CSS:
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
transform: rotate(90deg);
position: absolute;
top: 0;
right: 0;
}
在OS X 10.6.8上的Firefox 19.0.2中,它失败了.这似乎是因为,尽管给出了CSS属性的顺序,但在定位之后应用变换.换句话说,浏览器:
#text使得它的右上角位于父块的右上角,但只有因此,transform-origin这里的财产用处不大.例如,如果使用的transform-origin: top right;那个,则#text需要向下移动它旋转前的宽度.
我的问题:有没有办法告诉浏览器在轮换后应用CSS定位属性; 如果没有,那么是否有一种方法可以#text向下移动(例如使用top:)它旋转前的宽度？
NB.理想情况下,解决方案不应要求width:为其设置固定#text,并且不得要求JavaScript.
我正在尝试制作一个带有立方体的html页面,所述立方体的每个面都有按钮.在默认面上,所有按钮都能正常工作,但是,只要我旋转立方体,新面就会失去所有交互性.
HTML:
<button type="button" id="button">Toggle</button>
<hr>
<div id="cube">
<div class="face one"></div>
<div class="face two">
<button type="button">All</button>
<button type="button">News</button>
<button type="button">Media</button>
<button type="button">Events</button>
</div>
<div class="face three"></div>
<div class="face four"></div>
<div class="face five">
<button type="button">All</button>
<button type="button">News</button>
<button type="button">Media</button>
<button type="button">Events</button>
</div>
<div class="face six"></div>
</div>
CSS:
#cube {
position: relative;
height: 400px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 360px;
background-color:#ffffff;
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
} …我使用CSS3创建了一系列圆形标签.然后我旋转了这些标签,但文本的质量(Windows - Chrome)很差,并且在过渡时也会"变暗/模糊".有哪些替代方案？我是否正确应用了我的CSS？我会更好地旋转标签并保持文本水平吗？
我正在做一个围绕X中心的图形,Y为0,0.当渲染时,我使用translate重新定位,然后使用scale使图形填充画布(例如,将所有内容缩放50%).
我注意到你是否调用scale然后翻译,翻译然后扩展并且我无法理解它是很重要的.这是一个问题,因为一切并不总是合适,但我的心智模型并不完整,所以很难修复它.
有人可以解释为什么缩放和翻译调用的顺序很重要吗？
我正在使用css3缩放变换来缩放包含其他div的div.
我遇到的问题是我需要保留一些内部div,基本上好像它们没有缩放,它们的大小不应该改变,但是我确实需要用其他内容来扩展父div.
你怎么能扭转一些div的缩放？
我正在尝试应用反向缩放.
如果整个div应用了1.5的值,我试图找到我现在应该扩展其他div的值,以便在视觉上将它们恢复到以前的状态.
我正在尝试创建html5拼贴编辑器,您可以在其中编辑图像,类似于您在Word中看到的图像(裁剪图像而不是在拖动边缘时缩放图像,能够在自由变换区域内拖动/旋转/缩放图像(所以一种占位符功能)等).这意味着我们需要使用SVG和剪切/屏蔽,以及自由变换元素与那些掩码/剪辑的绑定位置.之后生成的整个SVG应该可以根据打印尺寸进行扩展(但这不是问题).
这个想法很简单 -
问题:即使转换后的SVG蒙版具有FT div的转换和位置的精确副本,当转换包含旋转时,它也会很奇怪.看起来像变换 - 原点不起作用,旋转和缩放以某种方式连接到左上角而不是中心,不知道为什么:/
这是一个小提琴,只是尝试旋转元素,你会看到问题是什么:
小提琴 (已经制作的svg的简化代码)
主要部分:
var refreshSVGMask = function(){
//get element transform
var elTransform = $('#ft').css("transform");
//quick parse of matrix transform:
var elMatrix = elTransform.substring(elTransform.indexOf("matrix") + 7, elTransform.indexOf(")"));
//modify matrix, to apply last two values (top and left position), which in jquery free transform are in "top" and "left" css attributes. Note - I've also tried applying same matrix, but changing "x" and "y" attributes in SVG (like: …如何transform-origin在react native 中将属性应用于样式？我已经尝试了几种方法，但没有得到任何活动
我试过了：
transform: [{ rotate: ('90deg')},{origin: {x: 'top', y:'center'}} ]