我在旋转和定位一行文字方面遇到了一些问题.现在它只是有效的位置.旋转也可以,但只有我禁用定位.
CSS:
#rotatedtext {
transform-origin: left;
transform: rotate(90deg);
transform: translate(50%, 50%);
}
html只是纯文本.
我想把我的中心div和我使用这种方法,但它使我的文本div模糊:
<!-- language: lang-css -->
#div {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
有没有办法让我的中心div？
我是d3和svg编码的新手,我正在寻找一种在图表的xAxis上旋转文本的方法.我的问题是,通常xAxis标题比条形图中的条形图宽.因此,我希望将文本旋转为在xAxis下方垂直(而不是水平)运行.
我尝试添加transform属性:.attr("transform","rotate(180)")
但是当我这样做时,文本完全消失了.我试过增加svg画布的高度,但仍然无法查看文本.
对我做错的任何想法都会很棒.我是否还需要调整x和y位置？而且,如果是这样,那么多少(当我在Firebug中看到它时难以排除故障).
有人知道如何从现有的XML模式(XSD文件)生成JSON模式吗？有没有可用的工具？
使用transform属性,z-index被取消并出现在前面.(当注释掉-webkit-transform时,z-index在下面的代码中正常工作)
.test {
width: 150px;
height: 40px;
margin: 30px;
line-height: 40px;
position: relative;
background: white;
-webkit-transform: rotate(10deg);
}
.test:after {
width: 100px;
height: 35px;
content: "";
position: absolute;
top: 0;
right: 2px;
-webkit-box-shadow: 0 5px 5px #999;
/* Safari and Chrome */
-webkit-transform: rotate(3deg);
/* Safari and Chrome */
transform: rotate(3deg);
z-index: -1;
}<html>
<head>
<title>transform</title>
<link rel="stylesheet" type="text/css" href="transformtest.css">
</head>
<body>
<div class="test">z-index is canceled.</div>
</body>
</html>transform和z-index如何协同工作？
第二次更新:看起来我的一个函数(resetFigures)阻止了事件处理程序,所以将它移动到bind函数的末尾就将其排序了.
更新:我在经过一些基本测试后意识到点击事件正在注册,只是在点击时盒子无法翻转.
我的网站基本美学功能在Chrome和Firefox中运行,但它拒绝在iOS上正常运行(在带有iOS 6.1的iPhone 4和带有iOS 4.3.5的iPad上进行测试).
您可以在此处查看该站点,当然还有脚本(main.js):http://bos.rggwebdesigns.com/
我已经读过iOS并没有真正正确地处理jQuery点击事件,但我很难找到解决方法.Stack Overflow上的一些线程提到了live()方法,但实现它如下(以及添加onclick=""到可点击元素)似乎不起作用:
$('.card').live('click touchstart', function() {
var figure = $(this).children('.back');
var button = figure.find('.button');
var column = $(this).parents().eq(1);
$('.column').removeAttr('style');
column.css('z-index', 2000);
resetFigures();
if(flipCard(this)){
swoosh.pause();
swoosh.currentTime = 0;
swoosh.play();
}
});
我还遇到了这个有趣的解决方案项目:http://aanandprasad.com/articles/jquery-tappable/.但是,我也没有运气:
$('.card').tappable(function() {
var figure = $(this).children('.back');
var button = figure.find('.button');
var column = $(this).parents().eq(1);
$('.column').removeAttr('style');
column.css('z-index', 2000);
resetFigures();
if(flipCard(this)){
swoosh.pause();
swoosh.currentTime = 0;
swoosh.play();
}
});
此外,如果我被误导,请纠正我,但根据此网站,iOS支持3D转换,并提供相应的前缀:http://caniuse.com/transforms3d
使用CSS3属性transform: scale,我发现了一个有趣的问题.我想为照片制作一点缩放效果.但是,当我用父DIV overflow: hidden和border-radius,孩子的div扩展父div的超越.
更新:
问题没有解决.如果我添加transition,仍然无法正常工作.我试图解决这个问题,但没有成功.
这是一个演示
我想将多个变换应用于UIView(或子类UIView),例如平移,旋转和缩放.我知道可以应用两个变换CGAffineTransformConcat,但是如果我有三个或更多变换,我该怎么做？
我看过这些问题:
但是这些问题正在问一些不同的东西,给出的答案只是谈论应用两个变换CGAffineTransformConcat.此外,他们使用Objective-C而不是Swift.
我有一个图层的CSS样式:
.element {
-webkit-transform: rotate(7.5deg);
-moz-transform: rotate(7.5deg);
-ms-transform: rotate(7.5deg);
-o-transform: rotate(7.5deg);
transform: rotate(7.5deg);
}
有没有办法通过jQuery获得curent旋转值？
我试过这个
$('.element').css("-moz-transform")
结果matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px)并没有告诉我很多.我想要得到的是7.5.
我试图翻转图像以4种方式显示它:原始(无变化),水平翻转,垂直翻转,水平翻转+垂直翻转.
要做到这一点,我在下面做,除了水平+垂直翻转,它工作正常,任何想法为什么这不会工作？
我在这里提出了一个问题的小提琴:https://jsfiddle.net/7vg2tn83/
.img-hor {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.img-vert {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
.img-hor-vert {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}