标签: transform
Firefox css moz-transform 缩小div，边框信息丢失
在firefox中打开下面的html，您可以看到右边框和下边框丢失了，但是Chrome / IE很好，是firefox中存在错误还是我可以使用其他方法使其看起来与Chrome / IE相同？
<!DOCTYPE html>
<html>
<head>
<style>
* {font-size:20px}
div
{
width:400px;
height:400px;
background-color:lightgreen;
border:1px solid black;
transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-webkit-transform-origin:0 0;
transform:scale(0.7);
-moz-transform:scale(0.7);
-ms-transform:scale(0.7);
-webkit-transform:scale(0.7);
}
</style>
</head>
<body style='margin:10px;padding:10px'><div>Hello. This is a DIV element.</div>
</body>
</html>
推荐指数
解决办法
查看次数
Safari CSS Transition flickering
我正在处理的网页出现问题。在 Firefox 上似乎没有任何问题。
我有 2 个元素，水平滚动，带有背景图像，这两个元素之间的过渡是使用 CSS3 进行的，transformX()、. 首先，这两个元素重叠（以便您可以看到第二个元素的背景图像），当您单击向右箭头时，第二个元素在前面从右向左滑动。当您单击右侧时，第一个元素从左向右滑动
当我返回第一个元素时，第二个元素会闪烁，就像重新排列其位置一样。
.first-container.first-container1 {
background: transparent url('../img/backgrounds/first1-background.jpg') no-repeat center center;
background-size: cover;
left: 0;
}
.first-container.first-container2 {
background: transparent url('../img/backgrounds/first2-background.jpg') no-repeat center center;
background-size: cover;
left: 100%;
}
.bs-first .first1 .first-container.first-container2 {
-webkit-transform: translateX(-8.5%);
-moz-transform: translateX(-8.5%);
-o-transform: translateX(-8.5%);
-ms-transform: translateX(-8.5%);
transform: translateX(-8.5%);
}
.first2 .first-container.first-container1 {
-webkit-transform: translateX(8.5%);
-moz-transform: translateX(8.5%);
-o-transform: translateX(8.5%);
-ms-transform: translateX(8.5%);
transform: translateX(8.5%);
z-index: 9;
}
我真的可以使用一些关于如何解决这个问题的提示。谢谢你！
推荐指数
解决办法
查看次数
GDAL 重投影错误：在方法“Geometry_Transform”中，类型“OSRCooperativeTransformationShadow *”的参数 2
使用 Python 2.7.9 和 GDAL 1.11.1，并使用 miniconda 进行包管理 --
执行此操作时，对坐标点进行简单的重新投影会导致下述错误。
我对 GDAL 比较陌生，所以我检查了Python GDAL/OGR 1.0 Cookbook中的代码是否 会产生相同的问题，结果确实如此：
from osgeo import ogr
from osgeo import osr
source = osr.SpatialReference()
source.ImportFromEPSG(2927)
target = osr.SpatialReference()
target.ImportFromEPSG(4326)
transform = osr.CoordinateTransformation(source, target)
point = ogr.CreateGeometryFromWkt("POINT (1120351.57 741921.42)")
point.Transform(transform)
print point.ExportToWkt()
这是错误：
/opt/miniconda/envs/pygeo/lib/python2.7/site-packages/osgeo/ogr.pyc in Transform(self, *args)
4880 OGRERR_NONE on success or an error code.
4881 """
-> 4882 return _ogr.Geometry_Transform(self, *args)
4883
4884 def GetSpatialReference(self, *args):
TypeError: in method 'Geometry_Transform', argument 2 of type …推荐指数
解决办法
查看次数
将值映射到具有对数间距的单位比例的算法
我正在寻找一种算法，将值映射到具有对数间距的单位比例。比例范围为 0 到 1。传入值的范围为 0 到 10000。
0 映射到 0、1 映射到 0.2、10 映射到 0.4、100 映射到 0.6 1000 映射到 0.8、10000 映射到 1.0
帮助/指示将不胜感激。
推荐指数
解决办法
查看次数
Chrome 文本在不透明度过渡时变得模糊
好吧，chrome 上文本模糊的好问题。
我正在创建一个 CSS 下拉菜单，可以在 和 之间切换，visibility: hidden并且文本opacity: 0会稍微模糊。visibility: visibleopacity: 1
Firefox 上不存在此问题。那里的文字很清晰。
你可以看到小提琴：http://jsfiddle.net/swum8rm7/1/
通过删除第 21 行上的过渡，您会发现文本变得清晰。我尝试了各种translateZ诡计backface，但无法让它正常工作。
推荐指数
解决办法
查看次数
CSS变换每次都以相同的方向旋转
我想让网页上的元素在每次单击按钮时逆时针旋转 360 度。我找到了一些示例代码，展示了如何执行此操作，但唯一的问题是当前它以交替方向旋转。
有没有一种简单的方法可以确保元素每次都沿同一方向旋转？
$('button').click(function() {
$('.box').toggleClass('box-rotate');
});.box {
background: lightblue;
width: 200px;
height: 200px;
margin: 20px auto;
transition: transform 1s linear;
transform-origin: top left;
transform-style: preserve-3D;
}
.box-rotate {
transform: rotate(360deg);
}
button {
display: block;
margin: auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="box"></div>
<button>click me</button>推荐指数
解决办法
查看次数
SVG以厘米为单位旋转
我正在尝试输出实际尺寸的 SVG，所以我使用 cm 作为单位
旋转变换对像素工作得很好，但是当我切换到 cm 时，它不会按预期旋转元素
<image preserveAspectRatio="none" x="1cm" y="1cm" width="3cm" height="3cm"
xlink:href="http://api.prestalife.net/media/superman.png"
transform="rotate(45, 2.5, 2.5)"
/>
jsFiddle：代码包含 px 和 cm 之间的比较
推荐指数
解决办法
查看次数
libgdx，如何让opengl正确拉伸图像？
所以我试图创建一个简单的方法来在渲染图像时拉伸图像。但是因为 opengl 使用这些三角形而不是矩形，所以有点搞砸了。
正如你所看到的，三角形的两个部分被不同程度地拉伸。我为此的代码如下：
public static void drawTexture(Texture texture, float x, float y, float x2, float y2, float x3, float y3, float x4, float y4){
if(cantRender()) return;
polyBatch.begin();
float[] vertices = new float[20];
float color = Color.WHITE.toFloatBits();
int idx = 0;
vertices[idx++] = x;
vertices[idx++] = y;
vertices[idx++] = color;
vertices[idx++] = 0;
vertices[idx++] = 1;
vertices[idx++] = x2;
vertices[idx++] = y2;
vertices[idx++] = color;
vertices[idx++] = 1;
vertices[idx++] = 1;
vertices[idx++] = x3;
vertices[idx++] = y3;
vertices[idx++] = color; …推荐指数
解决办法
查看次数
使用变换比例时防止纯 css 视差中的模糊效果
我对使用纯 CSS 的视差网站有疑问。
问题是它使用 css 变换比例来创建视差效果，这会导致缩放容器 div 内的图像和文本产生模糊效果。
我尝试过filter:blur(0)，以及我在网上找到的其他修复解决方案，但在 Firefox 中没有任何方法可以修复它。
此外还有另一个问题，图像的滑块在浏览器页面的左侧留下了一些像素。
有人能帮我吗？
http://www.jeanclaudechiementin.com/etoile/index.html
您可以在页面顶部的徽标和菜单上看到问题
推荐指数
解决办法
查看次数
React-native 变换风格保留 3d
我正在尝试在react-native 中重新创建这个3D 动画。一切都很好，但问题是react-native没有transform-style: preserve-3d. 是否有任何替代方案/填充，或者我如何在不使用此属性的情况下实现我的目标？
推荐指数
解决办法
查看次数