标签: css-transforms
使用 Transform CSS 时 Chrome 中的抗锯齿问题
我遇到了这个我似乎无法解决的抗锯齿 Chrome 错误。
我有两种类型的容器正在使用 transform 属性进行旋转。A 型具有纯色背景。类型 B 有一个带有 background-attachment:fixed 属性的图像背景，以强制它与它所在容器的背景图像对齐。
两种类型在旋转后都在 Chrome 中呈现锯齿状边缘。类型 A 上的锯齿状边缘已通过 -webkit-backface-visibilty: hidden; 解决，所以我不需要任何帮助。但是，我在容器类型 B 上的这个技巧没有那么幸运。使用该类破坏了背景图像和固定图像“视差”功能。
我已经尝试了几乎所有我能在各种论坛上找到的补救措施，并不断脱颖而出。有人对如何清理它有任何想法吗？下面的示例，最容易在 Chrome 中图像容器的底部边缘看到（我使用的是 44.0.2403.130（64 位）版本）！
HTML
<div class="spacer"></div>
<div class="content">
<div class="back" style="background-image:url('https://cbshouston.files.wordpress.com/2013/03/137153916-1.jpg');">
<div class="bottom-divider"></div>
</div>
</div>
<div class="spacer"></div>
CSS
body {
margin: 0;
padding: 0;
}
.content {
position: relative;
margin-bottom: 250px;
z-index: 9999;
}
.back {
min-height: 500px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
background-position: …推荐指数
解决办法
查看次数
使用 calc 和 Mircrosoft Edge 的 CSS 关键帧
因此，Microsoft Edge 似乎不允许在 @keyframes 中使用 CSS calc()？
@keyframes logoanimatestart{
from {transform: rotateY(360deg); width:50px; height:50px;top:-80px; left:100%;}
to {transform: rotateY(0deg); width:100px; height:100px; top:50px; left:calc(50% - 50px);}
}
在不使用第三方脚本的情况下，是否有解决此问题的方法？
推荐指数
解决办法
查看次数
如何制作四面体？
我正在尝试制作一个CSS tetrahedron，所以我通过做一些 CSS3 三角形并使用透视属性激活 3D 转换来解决这个问题。
但是我有一些问题需要考虑所有转换，这是我的一些代码：
.navbar-brand-logo {
width: 64px;
height: 64px;
transform-style: preserve-3d;
perspective: 600px;
position: relative;
}
.face {
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 64px 32px 0 32px;
transform-origin: 0 0;
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
}
.logo-base-left {
transform: rotateX(180deg) translateY(-64px);
}
.logo-base-right {
transform: rotateY(180deg) rotateX(180deg) translateY(-64px);
}
.logo-up {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
transform: rotateY(180deg) scaleY(0.5) translateY(-64px);
}
.logo-down-up {
border-color: …推荐指数
解决办法
查看次数
css动画旋转和翻译不能一起工作
我正在尝试使用 @keyframes 的 css 动画，但是 css Transform rotate 和 translate 属性不能一起工作。
请告知这里出了什么问题。谢谢！！
您可以在 codepen 上查看代码：http ://codepen.io/anon/pen/XdzwZB
以下是我的@keyframes 代码：
@keyframes slideIn {
0%, 100% {
transform: translate(10px);
transform: rotate(0deg);
color: red;
}
25% {
transform: translate(125px);
transform: rotate(360deg);
color: green;
}
}
推荐指数
解决办法
查看次数
Y 轴与 translate() 工作相反的方式
看看下图，实际上 Y+ 轴朝向图表的顶部，而 Y- 轴朝向图表的底部。也就是说，由正 Y 值表示的点应位于图表顶部，而由负 Y 值表示的点应位于底部。
但是当我transform: translate(50px,100px)在我的代码中使用时 ，它会像吹气图像一样显示出来。如您所见，即使平移 Y 值为正，元素也会被推向页面底部。
相反，它需要像下图那样（参考“正确格式”框），也就是说，它应该被推向顶部。（请原谅图片中的错字）
请仔细看图片。
我的代码：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: translate(50px,100px); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore consequatur amet nemo numquam, a perspiciatis maxime necessitatibus laudantium adipisci tempore,
</div>
</body>
</html>
推荐指数
解决办法
查看次数
超链接的缩放转换不起作用
我想对包含在超链接中的图像进行比例转换。所有这些都包含在一个 div 中。我写了一些东西，但它不起作用。我需要图像是一个超链接，因为它必须将用户重定向到另一个页面。
#logoemailcol {
position: relative;
cursor: pointer;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#logoemailcol:hover #logoem {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}<div id="logoemailcol">
<a href="" id="logoem" target="_blank">
<img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;">
</a>
</div>推荐指数
解决办法
查看次数
CSS 对角线 - 如何适应其父元素？
如何使对角线填充并适合框（只是纯 css - 不使用任何背景图像）？
div.diagonal-container {
border: 1px solid #000;
width:400px;
height:400px;
margin: 0 auto;
}
.to-right,
.to-left {
border-top:1px solid #ff00ff;
width:100%;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.to-right {
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}<div class="diagonal-container" style="">
<div class="to-right"></div>
</div>
<div class="diagonal-container" style="">
<div class="to-right"></div>
</div>
<div class="diagonal-container" style="">
<div class="to-left"></div>
</div>结果：
另外，是否可以只拥有一个元素而不包装它？例如：
<div class="to-right"></div>
<div class="to-right"></div>
<div class="to-left"></div>
是否可以？
推荐指数
解决办法
查看次数
translateZ 不适用于 Firefox
我一直在尝试使用 translateZ 在父元素“div2”后面隐藏子元素“list”。它在 chrome 上工作得非常好，但在 Firefox 上却没有。一些身体请帮助。
链接到 JSFiddle 。 Firefox 上的 translateZ
.list {
width: 200px;
height: 10px;
background-color: yellow;
-moz-transform: translateZ(-1em);
-webkit-transform: translateZ(-1em);
}
请在此处找到图片图片链接
左侧的图像在 chrome 上正常工作。黄色条在红色 div 后面。右侧的图像来自 firefox，其中黄色条位于红色 div 的前面 - 这是意料之外的。
推荐指数
解决办法
查看次数
CSS transition scale（）-怪异的延迟
运行下面的代码片段-单击圆圈以切换动画。应该发生的是，当父容器缩放时，子级应该看起来好像没有移动。
这可以通过按放大父级的相同比例缩小子级分量（父级缩放到4，子级缩放到0.25）来实现。
动画制作完成后，缩放比例是正确的，但是在动画制作过程中，它们似乎并没有一起缩放。
几乎就像父级先缩放，然后完成子级缩放一样。
这是某种浏览器限制吗？还是我做错了什么？
谢谢！
const outer = document.querySelector('.outer');
outer.addEventListener('click', () => {
outer.classList.toggle('outer--active');
});body { overflow: hidden; }
.outer {
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: top left;
transition: transform 1s;
cursor: pointer;
border: 1px solid black;
}
.outer--active {
transform: scale(4) translate(-50%, -50%);
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/14.jpg') center repeat;
transform-origin: …推荐指数
解决办法
查看次数
CSS-带有省略号的旋转文本
如果文本太长，我需要旋转和截断文本：
但是，如果我在上面加上省略号：
overflow: hidden;
text-overflow: ellipsis;
旋转后的文字将太短：
overflow: hidden;
text-overflow: ellipsis;
.box {
position: relative;
width: 300px;
}
.box-header {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
padding: 10px;
font-weight: bold;
background: #ccc;
color: red;
min-width: 0;
}
.box-header > div {
transform: rotate(-90deg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid red;
}
.box-content {
margin-left: 40px;
padding: 10px;
background: #eee;
}
.some-content {
height: 100px;
}推荐指数
解决办法
查看次数
标签 统计
css ×10
css-transforms ×10
html ×6
antialiasing ×1
css-shapes ×1
css3 ×1
diagonal ×1
ellipsis ×1
firefox ×1
svg ×1