标签: css-transforms
子元素上的Css3 Translate不起作用
这是我的css:
#sort_dropdown:hover > .arrow{
-webkit-transform: translate(0,-42px);
-moz-transform: translate(0,-42px);
-o-transform: translate(0,-42px);
transform: translate(0,-42px);
}
这是我的代码:
<li><a id="sort_dropdown">Sortieren <span class="arrow">↓</span><span class="arrow" style="display: none;">↑</span></a>
推荐指数
解决办法
查看次数
转换原点在 Firefox 中不起作用，即使是百分比值的属性
CSS3transform-origin在 Firefox 浏览器中不起作用。
我试图运行transform: rotate(360deg);中@keyframes的<g class="tyre">为儿童<svg class='truck'>。结果，除了chrome之外的所有其他浏览器的车轮旋转都可以正常工作
不幸的是，Stack Overflow 中有类似的问题，但没有一个与该问题相关。
.tyre{
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transform: rotate(0);
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
@keyframes spin {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}<svg class='truck' viewBox='0 0 93 53' xmlns='http://www.w3.org/2000/svg' …推荐指数
解决办法
查看次数
当chrome中的比例发生变化时,滚动条不会被修改
我有一个div,在div里面我有一个'svg'元素.我想放大,每次点击'svg'元素的'scale'值都会增加,从而产生缩放效果.但是,由于某种原因,当内部'svg'的比例增大时,父div的滚动条没有被修改.这个问题只出现在Chrome中,在IE中我实际上得到了想要的结果.
var elementToScale = document.getElementById('svg');
var scale = 1;
document.getElementById('zoom').addEventListener('click', function() {
scale += 0.1
elementToScale.style.transform = "scale(" + scale + ")";
});div {
border: 1px solid black;
width: 400px;
height: 400px;
overflow: scroll;
}
svg {
border: 1px solid black;
}<div>
<svg width=300px height=300px id="svg">
<rect width=200 height=200 x=50 y=50 fill="red" />
</svg>
</div>
<br>
<button id="zoom">
ZoomIn
</button>推荐指数
解决办法
查看次数
我如何给这艘宇宙飞船加速？
有一个非常小的类似小行星的游戏片段,我正在使用没有Canvas的DOM.当箭头键被按下时,我的"船"移动相当顺畅但是当箭头键被按住较长时间时,我将如何使船加速(速度和旋转)？
window.onkeyup = function( e ) {
var kc = e.keyCode;
e.preventDefault();
if ( kc === 37 ) Keys.left = false;
else if ( kc === 38 ) Keys.up = false;
else if ( kc === 39 ) Keys.right = false;
else if ( kc === 40 ) Keys.down = false;
};
function update() {
if ( Keys.up ) {
document.querySelector( 'div' ).style.transform += 'translateY( -1px )';
}
else if ( Keys.down ) {
document.querySelector( 'div' ).style.transform += 'translateY( 1px …推荐指数
解决办法
查看次数
如何旋转文本并固定到右下角？
我在摆弄旋转属性并意识到元素会根据其文本长度移动到不同的位置。
这是旋转部分的代码：
transform: rotate(-90deg) translate(0, -100%);
transform-origin: 0 0;
position: absolute;
bottom: 6rem;
right: -4rem;
transform: rotate(-90deg) translate(0, -100%);
transform-origin: 0 0;
position: absolute;
bottom: 6rem;
right: -4rem;
.stripBox {
min-height: 100px;
background-size: cover;
background-position: center center;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
}
.stripBox__smallNum {
padding-left: 2rem;
}
.stripBox__heading {
padding-right: 1rem;
color: white;
font-size: 1.2rem;
}
.stripBox--right {
flex-direction: row-reverse;
}
.stripBox--right .stripBox__smallNum {
padding-right: 1rem;
}
.stripBox--right .stripBox__heading {
padding-left: 2rem;
}
.stripBox:nth-child(1) …推荐指数
解决办法
查看次数
使用 translate 模拟变换原点
我想模拟在 CSS中transform-origin使用的属性transform: translate。
根据 MDN，这很有可能：
通过首先通过属性的否定值转换元素，然后应用元素的转换，然后通过属性值转换来应用此属性。
但是，当我尝试时，我得到了错误的结果。这两个矩形显然不一样：
.origin {
transform-origin: 100px 100px;
transform: translate(100px, 0px) scale(2) rotate(45deg);
}
.translate {
transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}
.box {
background-color: red;
width: 100px;
height: 100px;
}
.container {
float: left;
margin: 100px;
width: 250px;
height: 250px;
background-color: rgba(0, 0, 0, 0.1);
}<div class="container">
<div class="box origin">
</div>
</div>
<div class="container">
<div class="box translate">
</div>
</div>很长一段时间以来，我一直在尝试寻找没有运气的答案，在我看来它应该相对简单，我只是想不通。
推荐指数
解决办法
查看次数
仅倾斜前后的一侧以获得扁平箭头
我创建了一些虚拟的面包屑步骤。第一个面包屑步骤需要在左侧有一个正常的平面边框，这就完成了。在悬停时，我需要为每个面包屑项目显示黑色边框。
但唯一的问题是悬停时，对于第一个面包屑步骤，我没有按预期在左侧获得平坦的边框。
这是悬停时的预期：
这是我的代码：
body {
padding: 0;
margin: 0;
}
.breadcrumbs {
background-color: white;
width: 100%;
padding: 0 1rem;
font-size: 0;
margin: 1rem;
}
.breadcrumbs .breadcrumb-step {
display: inline-block;
width: 12.33%;
height: 5rem;
text-decoration: none;
color: black;
}
.step-title {
display: none;
}
.breadcrumb-step:before {
content: '';
display: block;
transform: skew(30deg);
border: 1px solid lightgrey;
border-bottom: none;
height: 50%;
width: 100%;
}
.breadcrumb-step:after {
content: '';
display: block;
transform: skew(-30deg);
border: 1px solid lightgrey;
border-top: none;
height: 50%;
width: …推荐指数
解决办法
查看次数
梯形截面，剪切背景图像
我正在尝试创建一个具有梯形形状的 Web 布局，如所附图像中所示。另外，每个部分都有一个background-image用cover或类似的结果填充背景。
第一部分（深蓝色）我只是使用skew和两个 div 实现的，如下所示。
但是，我无法创建以下部分，它向两个方向倾斜。我尝试使用clip-path没有运气。然后最后一部分需要再次平方。
HTML
<section id="my_section">
<div id="my_section_bg"></div>
<div id="my_section_content">
<!-- any typical content, text/images here -->
</div>
</section>
CSS
#my_section {
padding-top: 80px;
padding-bottom: 90px;
background-color: rgba(74,90,119,.5);
transform: skewY(-4deg);
}
#my_section_bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: linear-gradient(
to bottom,
rgba(29,44,71,.85) 0%,
rgba(29,44,71,1) 100%
), url("./assets/my_bg_img.jpeg");
background-color: rgba(29,44,71,1);
transform: skewY(8deg);
}
#my_section_content {
transform: skewY(4deg); …推荐指数
解决办法
查看次数
理解在 CSS 转换中缩放后的翻译
我有一个 6400x3600 大小的 div。我正在使用变换原点：50% 50%。当我将比例设置为 0.9 时，为了让孩子们停留在左上角，我需要将其转换为负值。我的推理是 6400 - 5760(90%) = 640 / 2 = 320...所以对于 x 它应该转换 -320px .. 但实际上需要的是 -355.556px。
示例：https : //jsfiddle.net/fvnq3ewj/28/
* {
padding: 0;
margin: 0;
}
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 6400px;
height: 3600px;
background-color: red;
transform-origin: 50% 50%;
transform: scale(0.9) translate(-355.556px, -200px);
}<html>
<body>
<div class="container">
</div>
</body>
</html>有人对此有任何解释吗？
推荐指数
解决办法
查看次数
为什么变换：倾斜（30度）；与变换不同：matrix(1,0,30,1,0,0);?
比较以下两个代码片段-
.box {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.box1 {
margin: 100px;
transform: skew(30deg);
}<div class="box box1"></div>.box {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.box2 {
transform: matrix(1, 0, 30, 1, 0, 0);
}<div class="box box2"></div>在我使用的第一个代码片段和我使用transform: skew(30deg);
的第二个代码片段中， transform: matrix(1,0,30,1,0,0);
正如您在matrix()函数中看到的那样，我将所有参数保留为默认值，但skewX()我将其更改为30. skew(30deg)根据我的假设，这应该像工作一样。由于文档说matrix()采用如下参数：
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() );
如果您运行上面的代码片段，那么您会发现不同的输出。为什么他们不一样？正如我的假设所说，它应该是相等的，因为我skewX(30deg)在这两种情况下都使用过。
该matrix()功能实际上是如何工作的？
矩阵函数中的scaleX(), …
推荐指数
解决办法
查看次数
标签 统计
css ×10
css-transforms ×10
html ×4
javascript ×2
animation ×1
clip-path ×1
css3 ×1
firefox ×1
game-physics ×1
svg ×1