Questions tagged «css-transforms»

使用CSS，如何应用多个transform？ 示例：在下面，仅应用平移，而不应用旋转。 li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }

602 css  css-transforms 

我在哪里，在正常情况下，CSS，固定股利将正好它被指定的（定位的情况下top:0px，left:0px）。 如果我的父母有一个translate3d转换，这似乎不被尊重。我没看到什么吗？我尝试了其他webkit转换，例如样式和转换原点选项，但没有运气。 我在JSFiddle上附加了一个示例，在该示例中，我希望黄色框位于页面的顶部，而不是容器元素的内部。 您可以在下面找到小提琴的简化版本： #outer { position:relative; -webkit-transform:translate3d(0px, 20px , 0px); height: 300px; border: 1px solid #5511FF; padding: 10px; background: rgba(100,180,250, .8); width: 80%; } #middle{ position:relative; border: 1px dotted #445511; height: 300px; padding: 5px; background: rgba(250,10,255, .6); } #inner { position: fixed; top: 0px; box-shadow: 3px 3px 3px #333; …

140 html  css  css-position  css-transforms 

假设我有几列，我想旋转其中的一些值： http://jsfiddle.net/MTyFP/1/ <div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> <div class="statusColumn"><b>Rotated</b></div> <div class="statusColumn"><abbr>Normal</abbr></div> </div> 使用此CSS： .statusColumn b { writing-mode: tb-rl; white-space: nowrap; display: inline-block; overflow: visible; transform: rotate(-90deg); transform-origin: 50% 50%; } 最终看起来像这样： 是否有可能编写任何CSS来使旋转后的元素影响其父级的高度，从而使文本不会与其他元素重叠？像这样：

119 css  css-transforms 

我在旋转和定位一行文本时遇到一些问题。现在，只是位置有效。旋转也可以，但是仅当我禁用定位时。 CSS： #rotatedtext { transform-origin: left; transform: rotate(90deg); transform: translate(50%, 50%); } html只是纯文本。

86 css  webkit  transform  css-transforms 

我正在使用CSS转换在CSS转换状态之间进行转换（基本上是在转换元素的比例）。我注意到当元素过渡时，页面上的其余文本（在Webkit中）倾向于稍微改变其呈现方式，直到过渡完成为止。 小提琴：http : //jsfiddle.net/russelluresti/UeNFK/ 我还注意到在我的标头上没有发生这种情况，标头上具有-webkit-font-smoothing: antialiased属性/值对。因此，我想知道，是否有任何方法可以使文本保持其默认外观（字体平滑的“自动”值）并且在过渡期间不更改渲染。 我尝试过显式设置文本以使用“自动”值，但这没有任何作用。我还应注意，将字体平滑设置为“无”也可以防止过渡期间渲染闪烁。 任何帮助表示赞赏。 编辑1 我应该注意，我使用的是OSX。在Parallels上的Chrome浏览器中测试时，我没有看到两个不同的段落的行为有所不同，因此这可能是Mac独有的问题。

81 css  webkit  css-transitions  css-transforms 

如何将rotateX(50deg) rotateY(20deg) rotateZ(15deg)速记合并rotate3d()？

79 css  css-transforms 

我正在尝试使用CSS过滤器。 我想同时使用模糊和灰度，但是我似乎无法在同一张图片上同时使用两者？ 在这里看到小提琴... http://jsfiddle.net/joshmoto/fw0m9fzu/1/ .blur { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } .grayscale { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); } .blur-grayscale { filter: blur(5px) grayscale(1); -webkit-filter: blur(5px) grayscale(1); -moz-filter: blur(5px) grayscale(1); -o-filter: blur(5px) grayscale(1); -ms-filter: blur(5px) grayscale(1); }

78 css  css-transforms 

我正在尝试使用CSS创建过山车风格的动画。 我想知道在循环阶段如何弯曲“过山车”。 我正在寻找所有CSS解决方案，但是如果需要一点JavaScript，我可以接受。 到目前为止，我的代码： #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; } #coaster { width: 100px; height: 10px; background: lightblue; position: absolute; bottom: 0; left: 1px; right: 1px; margin: 0 auto; } @keyframes loop { from { margin-left: -200px; } 30% …

15 html  css  css-animations  css-transforms