CSS3 변환을 사용하여 웹 사이트에서 테두리가있는 이미지와 텍스트 상자를 회전했습니다.
문제는 안티 앨리어싱이없는 (낮은 해상도) 게임처럼 Chrome에서 테두리가 들쭉날쭉하게 보입니다. IE, Opera 및 FF에서는 AA가 사용되기 때문에 훨씬 좋아 보입니다 (아직 명확하게 표시되지만 나쁘지는 않습니다). Mac이 없기 때문에 Safari를 테스트 할 수 없습니다.
회전 된 사진과 텍스트 자체는 잘 보입니다. 들쭉날쭉 한 테두리 만 나타납니다.
내가 사용하는 CSS는 다음과 같습니다.
.rotate2deg {
transform: rotate(2deg);
-ms-transform: rotate(2deg); /* IE 9 */
-webkit-transform: rotate(2deg); /* Safari and Chrome */
-o-transform: rotate(2deg); /* Opera */
-moz-transform: rotate(2deg); /* Firefox */
}Chrome에서 AA를 사용하도록하는 등이 문제를 해결할 수있는 방법이 있습니까?
아래 예 :
답변
누구나 나중에 이것을 검색하는 경우 Chrome의 CSS 변환에서 들쭉날쭉 한 가장자리를 제거하는 좋은 방법은 CSS 속성 -webkit-backface-visibility을 값으로 추가하는 것 입니다 hidden. 내 자신의 테스트에서 이것은 완전히 매끄럽게했습니다. 희망이 도움이됩니다.
-webkit-backface-visibility: hidden;답변
transition대신에 를 사용하는 transform경우-webkit-backface-visibility: hidden; 작동하지 않습니다. 투명한 PNG 파일을 위해 애니메이션 도중 들쭉날쭉 한 가장자리가 나타납니다.
그것을 해결하기 위해 나는 다음을 사용했다. outline: 1px solid transparent;
답변
1px 투명 테두리를 추가하면 앤티 앨리어싱이 트리거됩니다
outline: 1px solid transparent;또는 1px 투명 상자 그림자를 추가하십시오.
box-shadow: 0 0 1px rgba(255,255,255,0);답변
3D 변형을 시도하십시오. 이것은 매력처럼 작동합니다!
/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(2deg);답변
선택한 답변 (다른 답변 중 어느 것도)이 효과가 없었지만 이것은 효과가 없었습니다.
img {outline:1px solid transparent;}
답변
-45deg의 CSS3 그라디언트에 문제가 있습니다. background기울어 심하게 유사 들쭉날쭉하지만 원래의 게시물보다 더했다. 그래서 나는 둘 다 가지고 놀기 시작했다 background-size. 이것은 들쭉날쭉 함을 펼치지 만 여전히 거기에있었습니다. 그리고 추가로 내가 조정할 수 있도록 다른 사람들이 45deg 증가에 너무 문제가있는 읽기 -45deg에-45.0001deg 내 문제가 해결되었습니다.
아래에있는 내 CSS에서 background-size처음이었다 30px그리고 deg배경 그라데이션 정확히이었다 -45deg, 모든 키 프레임이었다 30px 0.
@-webkit-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-moz-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-ms-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-o-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-webkit-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-moz-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-ms-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-o-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
.pro-bar-candy {
width: 100%;
height: 15px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(187, 187, 187);
background: -moz-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -webkit-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -o-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -ms-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(
25%,
rgba(187, 187, 187, 1.00)
),
color-stop(
25%,
rgba(0, 0, 0, 0.00)
),
color-stop(
50%,
rgba(0, 0, 0, 0.00)
),
color-stop(
50%,
rgba(187, 187, 187, 1.00)
),
color-stop(
75%,
rgba(187, 187, 187, 1.00)
),
color-stop(
75%,
rgba(0, 0, 0, 0.00)
),
color-stop(
rgba(0, 0, 0, 0.00)
)
);
background-repeat: repeat-x;
-webkit-background-size: 60px 60px;
-moz-background-size: 60px 60px;
-o-background-size: 60px 60px;
background-size: 60px 60px;
}
.pro-bar-candy.candy-ltr {
-webkit-animation: progressStripeLTR .6s linear infinite;
-moz-animation: progressStripeLTR .6s linear infinite;
-ms-animation: progressStripeLTR .6s linear infinite;
-o-animation: progressStripeLTR .6s linear infinite;
animation: progressStripeLTR .6s linear infinite;
}
.pro-bar-candy.candy-rtl {
-webkit-animation: progressStripeRTL .6s linear infinite;
-moz-animation: progressStripeRTL .6s linear infinite;
-ms-animation: progressStripeRTL .6s linear infinite;
-o-animation: progressStripeRTL .6s linear infinite;
animation: progressStripeRTL .6s linear infinite;
}답변
흐린 상자 그림자를 사용하여 재규어를 가릴 수 있습니다. . box-shadow 대신 -webkit-box-shadow를 사용하면 비 webkit 브라우저에 영향을 미치지 않습니다. Safari와 모바일 웹킷 브라우저를 확인하고 싶을 수도 있습니다.
결과는 다소 나아지지만 다른 브라우저보다 훨씬 좋지 않습니다.
