那些遇到过的问题

标签: css-transforms

旋转后获取元素的顶部和左侧位置

当我通过旋转元素

myElem.css('-moz-transform', 'rotate(' + degree + 'deg)');
myElem.css('-webkit-transform', 'rotate(' + degree + 'deg)');
myElem.css('-o-transform', 'rotate(' + degree + 'deg)');
myElem.css('-ms-transform', 'rotate(' + degree + 'deg)');
Run Code Online (Sandbox Code Playgroud)

我需要获得正确的左侧/顶部位置...

myElem.getBoundingClientRect().left
Run Code Online (Sandbox Code Playgroud)

...没有提供正确的 x/y 位置。以及 fe 使用 jQuery ...

$(myElem).position().left
Run Code Online (Sandbox Code Playgroud)

...传递错误的值。

这是一张图片来说明我的意思 旋转的div
（来源：dasprinzip.com）

该怎么办？

javascript css jquery css-transforms

use*_*803
2020 06-20
5
推荐指数
0
解决办法
2810
查看次数

子项上的变换比例会导致异常溢出滚动外观？

为什么在这个例子中垂直滚动条的大小加倍，而水平滚动条没有？ 

<div style="width:200px; height: 200px; overflow:scroll">
  <div style="width: 400px; height: 400px; background-color:orange; transform: scale(.5, .5); -webkit-transform: scale(.5, .5); transform-origin: 0 0; -webkit-transform-origin: 0 0;">
    TEST TEXT 1 TEST TEXT 2 TEST TEXT 3 TEST TEXT 4 TEST TEXT 5 TEST TEXT 6 TEST TEXT 7 TEST TEXT 8
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

水平滚动条应该与垂直滚动条具有相同的比例。

正如它在 chrome、safari 和 firefox 中发生的那样，我猜这种行为是用某种标准编写的？这是一个小提琴：http : //jsfiddle.net/v2xhj3kw/

html css overflow css-transforms

jed*_*ikb
2014 10-07
5
推荐指数
1
解决办法
1079
查看次数

带有 CSS3 模糊滤镜的 Div 在过渡时显示模糊的边缘

我开始认为这是 Chrome 中的一个错误，因为 safari 没有问题，我已经搜索了 SO 寻找解决方案，但还没有提出。

问题是，当应用 css 过滤器模糊然后剪裁边缘时，如果您尝试转换该 div，它会暂时显示模糊边缘，即使您已将内部 div 缩放到过滤器模糊之后。

查看我的示例并单击图像（查看图像边缘）：http : //codepen.io/anon/pen/MYqbmJ

这里有什么想法吗？

$('#background').on('click', function() {

  $(this).toggleClass('ready');

});
Run Code Online (Sandbox Code Playgroud) 
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100%;
  position: relative;
}

#background {
  background-image: url(http://zurb.com/playground/uploads/upload/upload/332/220px-BlurParklife.jpg);
  -webkit-background-size: contain;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  left: -35px;
  right: -35px;
  top: -35px;
  bottom: -35px;
  -webkit-filter: blur(15px);
  position: absolute;
  transition: transform 300ms ease-in-out;
  transform: scale(1.1);
}

#background.ready {
  transform: scale(2);
} …
Run Code Online (Sandbox Code Playgroud)

css css-transforms css-filters

stw*_*ite
2019 12-21
5
推荐指数
1
解决办法
1254
查看次数

CSS 样式转换与 svg 转换

我认为 SVG 的很大一部分是可扩展性因素。我知道如何很好地使用 SVG 以多种不同的方式进行缩放和响应。通常可以在 SVG 元素上设置视图框，然后会根据屏幕的像素创建坐标系。因此，所有变换、平移、旋转、倾斜等都将相对于 svg 自己的坐标系。我认为在翻译等方面，这应该比使用 css 动画更有优势，因为您必须使用像素等测量单位，我认为这会导致在各种分辨率的屏幕上进行不正确的翻译，或调整大小一个浏览器窗口。

有人可以向我解释一下，为什么无论我是在动画之前调整窗口大小还是使用不同的屏幕分辨率，以下 css 动画实际上都会导致元素的相同位置？

Javascript

var g= document.getElementById("testingG");
g.setAttribute("style", "transform: translate("+dockingPoint[0]+"px, "+dockingPoint[1]+"px)");
Run Code Online (Sandbox Code Playgroud)

CSS

#testingG {
    transition: 1s ease-in;
}
Run Code Online (Sandbox Code Playgroud)

HTML

<svg viewBox="0 0 1409 78.875" >
    <g id="testingG"style="transform: translate(1375px, 40px)">
        <circle r="10" cy="0" cx="0" style="fill: rgb(151, 215, 241);"></circle>
        <text  transform="translate(-170, 27)">Testing</text>
    </g>
Run Code Online (Sandbox Code Playgroud)

请注意，我为 g 元素设置了内联 css，这将确保在我使用 javascript 修改样式时触发转换。

我假设在不同的分辨率下，这个 g 元素最终会出现在不同的位置。

svg 元素是否在后台以某种方式忽略了我正在通过 css 进行翻译并仍然缩放这些像素尺寸以符合我设置的视图框的事实？

这是我唯一能想到的，如果是这种情况，我会很感激一些文档的链接:)

javascript svg css-transforms css-animations responsive-design

Lor*_*nja
2016 01-21
5
推荐指数
1
解决办法
1736
查看次数

Reveal.js：Firefox 中的模糊字体

我想使用reveal.js 创建一个演示文稿。幻灯片会自动缩放以适合浏览器窗口。

但是，在 Firefox (47) 中，字体确实很模糊，无论是在 Windows 10 还是 Fedora 上。Chrome 在两个系统上看起来都不错，Edge 也是如此。

我在下面放了一张比较图：它显示了来自reveal.js 演示页面的“V” 。如您所见，Chrome 和 Edge 大约有 1 个像素的“抗锯齿边界”，而 Firefox 显示大约 3 个像素。真的很难看...

字体对比

我该怎么做才能在 FF 中获得更清晰的演示？

css firefox css-transforms reveal.js

Gei*_*ier
lucky-day
5
推荐指数
0
解决办法
266
查看次数

2D Transform Transition 不适用于 IE11 中的 VW 和 VH 单元

当我尝试使用转换为转换 translateY() 设置动画时，IE11 和 10 遇到了一个奇怪的问题。我有一个天空盒，里面的天空高度为 500vh。这个天空必须根据视口中的当前部分上下移动。视口是一个绝对：位置元素，它处理内容等等。

当我现在将天空设置为转换：translateY(-400vh) 时，它可以在除 IE11 和 10 之外的每个浏览器中正常工作。看起来元素在过渡开始时消失，并在过渡完成时出现。

你可以在这个小提琴中找到一个简短的例子：https : //jsfiddle.net/90q394vz/4/

body, html {
  height:100%;
  width:100%;
  overflow:hidden;
}
* { box-sizing:border-box; }

header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#fff;
  z-index:100;
}

.skybox {
    //height: 100%;
    z-index: 1;
    //width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}
.skybox .sky {
    height: 500vh;
    width: 100%;
    background: red;
    transform: translateY(-400vh);
    transition: all 0.8s ease-in-out;
}
.sec1 .skybox .sky {
  transform: translateY(-400vh); …
Run Code Online (Sandbox Code Playgroud)

html css css-transitions css-transforms

non*_*nnn
2017 03-03
5
推荐指数
1
解决办法
5059
查看次数

将变换：缩放应用于背景图像

我正在尝试使用 transform:scale 对具有 background-size:cover 的 div 背景图像实现优雅的放大效果。

我面临的问题是，随着背景图像的放大，比例似乎扩大了 div。

有没有办法只将效果应用于背景图像？还是我做错了什么？

.despre-noi-image {
  width: 40%;
  height: 500px;
  background: url('https://static.independent.co.uk/s3fs-public/styles/story_large/public/thumbnails/image/2017/04/18/16/wine-evening.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: left;
  background-position-x: 50%;
  background-position-y: 0%;
  -webkit-animation: zoomin 10s linear;
  animation: zoomin 10s linear;
  animation-fill-mode: forwards;
}

@-webkit-keyframes zoomin {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="despre-noi-image">
  &nbsp;
</div>
<!-- despre-noi-image -->
Run Code Online (Sandbox Code Playgroud)

html css css-transforms

rad*_*zrc
2017 11-10
5
推荐指数
2
解决办法
2万
查看次数

CSS Transform - 保持悬停状态的价值

我已经把一个盒子变成了旋转 10 个？并添加了悬停状态以增加尺寸。 

.box {
    margin: 0 auto;
    background: blue;
    width: 100px;
    height: 100px;
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}
.box:hover {
    -moz-transform: scale(1.2) rotate(10deg);
    -webkit-transform: scale(1.2) rotate(10deg);
    -o-transform: scale(1.2) rotate(10deg);
    -ms-transform: scale(1.2) rotate(10deg);
    transform: scale(1.2) rotate(10deg);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="box"></div>
Run Code Online (Sandbox Code Playgroud)


只是出于好奇，我想知道是否有一种方法可以不必添加 10？再次在悬停状态，它会保持与静态相同的值？

也许与此类似：
.box:hover {transform: scale(1.2) rotate(inherit)}

css hover css-transforms

Mar*_*nes
2018 07-11
5
推荐指数
1
解决办法
1032
查看次数

尝试在 javascript 中应用 CSS 转换

在我的页面上，我有一个跟随用户光标的元素。我想要做的是使用普通的 javascript来transform代替top/ left。没有任何库或依赖项...问题是我需要将存储在变量中的值应用到转换属性。我没有找到任何可以帮助我的东西......这是我的代码：

var cursor = document.getElementById('cursor');
document.body.addEventListener("mousemove", function(e) {
  //storing cursor position as variables
  var curX = e.clientX;
  var curY = e.clientY;
  
  
  // I need the code below to be replaced with transform-translate instead of top/left
  // I can not get this to work with any other method than top/left
  cursor.style.left = curX - 7 + 'px';
  cursor.style.top = curY - 7 + 'px';
    
});
Run Code Online (Sandbox Code Playgroud) 
body {
  background: orange;
  height: 500px;
  width: 500px;
} …
Run Code Online (Sandbox Code Playgroud)

html javascript css css-transforms

Ale*_*ski
2019 12-15
5
推荐指数
1
解决办法
1万
查看次数

转换比例后如何防止 Windows Chrome 上的滚动条模糊？

我在尝试缩放 HTML 元素时遇到了一个奇怪的问题。如本 codepen 中所示，我希望元素显示为按比例缩小 ( transform: scale(0.1))，然后为自身设置动画并放大到其完整大小 ( transform: scale(1))。该元素是一个使用 限制高度的大列表overflow: auto;，这意味着显示滚动条。

我的问题是与其他元素相比，滚动条箭头没有正确放大，这使得它们非常模糊并且用户无法识别。使用 Chrome 时，这似乎只发生在 Windows (10) 上。下面的cf截图

模糊滚动条

我在网上找不到任何人谈论这个问题，这对我来说似乎有点令人困惑，因为它似乎不是边缘情况，而且重现起来非常简单。

提前感谢您的任何建议:)

css google-chrome css-transforms

Hug*_*ugo
lucky-day
5
推荐指数
1
解决办法
149
查看次数

标签 统计

css-transforms ×10

css ×9

html ×4

javascript ×3

css-animations ×1

css-filters ×1

css-transitions ×1

firefox ×1

google-chrome ×1

hover ×1

jquery ×1

overflow ×1

responsive-design ×1

reveal.js ×1

svg ×1