如果在我的网站上使用Bootstrap 4旋转木马，我会看到模糊的文本
如果在您的网站上使用Bootstrap 4旋转木马，可能会出现模糊的文本的情况。这是因为Bootstrap 4旋转木马默认使用了CSS3的transform属性来实现旋转效果，而在某些浏览器中，使用transform属性会导致文本模糊。
为了解决这个问题，您可以尝试以下几种方法：
- 使用
backface-visibility属性：在旋转木马的CSS样式中，为旋转木马的容器元素添加backface-visibility: hidden;属性。这个属性可以让旋转元素的背面不可见，从而解决文本模糊的问题。 - 使用
translate3d替代transform：在旋转木马的CSS样式中，将transform属性替换为translate3d属性。例如，将transform: rotateY(180deg);替换为translate3d(0, 0, -100%) rotateY(180deg);。这个方法可以利用硬件加速来提高性能，并且不会导致文本模糊。 - 使用图片代替文本：如果您的旋转木马中包含的是文本内容，而不是图片，您可以考虑将文本转换为图片，并在旋转木马中使用这些图片代替文本。这样可以避免文本模糊的问题。
以上是解决Bootstrap 4旋转木马中模糊文本的几种方法。希望对您有帮助！如果您对Bootstrap 4旋转木马还有其他问题，可以继续提问。
相关·内容
1回答
CSS3旋转动画导致Animate.css抖动动画消失
css、animation、animate.css
每当我执行一个Animate.css抖动动画后，CSS3旋转动画，div被摇将消失。这只发生在旋转div的背面。正面没有这个问题。
为了证明这个问题，我做了一个小动作。
HTML
<div class="wrappers">
<div class="wrapper shaker front">
<p>Front</p>
<p><a href="#" class="flip">Flip</a></p>
<
浏览 2提问于2014-01-31得票数 2
回答已采纳
1回答
为什么引导程序中的旋转木马项目使用透视图1000？
html、twitter-bootstrap、css、twitter-bootstrap-3
我一直在自定义引导旋转木马，我注意到以下代码：
.carousel-inner > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visib
浏览 2提问于2017-02-11得票数 1
1回答
翻转动画在mac OS X上的chrome中不起作用
css、css-transitions
我有一个仪表板，因为我正在使用CSS3翻转动画，翻转动画在windows中工作得很好，但当谈到Mac上的铬时，翻转动画是闪烁的，当我悬停在DIV.Please上时，它提供了一些修复。
谢谢。
CSS：
这里的问题只是“背面”，当我在那个div上悬停时，它是闪烁的。
#f1_container {
position: relative;
width: 100%;
z-index: 1;
margin-bottom: 20px;
display: inline-block;
}
#f1_container {
-webkit-perspective: 1000;
-mo
浏览 0提问于2016-06-20得票数 2
1回答
转换:旋转在Safari中不起作用
css、safari、rotation、transform
我想创建一个从前面到后面旋转的翻转框-在前面有一个文本，也在后面的side.The问题是，即使它旋转，从前面和后面的文本都是可见的，当盒子旋转。并且来自背面的文本首先是可见的，而不是来自正面的文本。也许有人知道为什么？在Chrome中，一切工作正常，没有问题。
.box {
width: 155px;
height: 125px;
position: relative;
display: inline-block;
padding: 5px;
line-height: 20px;
}
.box-in {
width: 100%;
height: 1
浏览 1提问于2017-06-02得票数 6
回答已采纳
1回答
Android Webkit中的CSS转换后台可见性
android、css
我正在开发一个基于移动网页的网页，它使用CSS转换和3D转换。我在Android3.1Webkit中遇到了一个bug，我似乎找不到解决方案。
我使用CSS旋转，这样基本上就有了一个带有参数backface-visibility: hidden;的元素，然后我向这个元素添加了一个类来启动转换。
#flipper {
-webkit-transform-origin: center center;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-webk
浏览 0提问于2012-01-04得票数 1
1回答
背景-与动画一起使用时，可见性不起作用。
html、css
我试图使用CSS关键帧来实现卡翻转效果，但由于某种原因，transform: rotateY()没有正确地旋转。当它被@keyframes旋转时，当它通过rotateY(90deg)之后，它的前侧没有显示，相反它显示的是翻转的背面。当切换卡片“手动”(在检查元素中)时，它可以正常工作。
默认情况下，卡片显示的是正面。但是动画从背面开始，然后翻转。动画保持其结束状态。
据我所见，由于某种原因，前侧总是在后面。(如果你在背面不透明，就可以看到正面。)
我试过的：
在父元素(.cards).Using + rotateY()中添加perspective: 1000px;，而不是将negative.A
浏览 6提问于2020-06-15得票数 0
回答已采纳
2回答
Safari中的CSS FlipCard (3d变换)
css、safari、transform
一个简单的FlipCard应用程序。这款应用在Chrome上运行得很好，但在Safari上就不行。在Safari中，单击时，可以看到卡片背面的文本，它闪烁，然后消失。 代码的想法来自于这个链接：w3schools/howto/css-flip-card HTML： <div class='flip-card'>
<div class='flip-card-inner'>
<div class='flip-card-front'><p>1</p></div>
<div
浏览 17提问于2019-02-12得票数 0
3回答
在模糊文本中响应本机rotateY结果
react-native
我正在开发用于iOS设备的设备中的翻转卡组件，我就是这样处理它的：
<Animated.View ref="container" style={{position:'relative',transform:[{rotateY:'0deg'}]}}>
<View ref="frontFace"><Text>Front face</Text></View>
<View ref="backFace" style={{transform:[{
浏览 5提问于2015-10-12得票数 5
1回答
使用css3和jquery翻转
jquery、css、animation
我试图使用jquery和css3创建一个翻转页面。我可以这样做，如果我把我的2页放在一个容器，然后旋转整个容器，但我喜欢旋转我的页面只。这是我的密码：
css：
#pagecontainer {
position: absolute;
width: 100%;
height: 100%;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
浏览 3提问于2013-07-07得票数 1
2回答
卡翻转在IE10中不能正常工作
html、css
卡翻转在所有浏览器中都工作得很好，但在IE10中却不太好，悬停后背面的内容旋转180度。
我在google上搜索了很多，但是我没有任何IE10的修复，这是我的代码
HTML
<div class="flip-container">
<div class="flipper">
<div class="front">
<h2>Front content</h2>
</div>
<div cla
浏览 4提问于2014-02-27得票数 0
回答已采纳
1回答
jQuery连续动画“transform:rotateY”总是朝着同一个方向
jquery、css
我想继续翻转一个元素围绕它的Y轴，显示四个改变的文本在正面和背面，总是让它转向相同的方向。每个函数调用下一个函数，最后一个函数跳回第一个函数。文本在背面即不可见的情况下被改变。(顺便说一句:我增加了透视图和渐变，只是为了使旋转方向更加明显)
我想出了这个(按下按钮启动它)：
function turn1() {
$('#front').css({transform: 'rotateY(180deg)'});
$('#back').css({transform: 'rotateY(360deg)'}).delay(200
浏览 1提问于2019-02-20得票数 0
回答已采纳
1回答
在Safari中显示一个标题
css、safari、transitions
我正在制作一个网站，它应该从图片中旋转以显示标题，但由于某种原因，它会旋转，但它不会在safari中显示标题。网站为lomsasd.com/Graphic.html。
css代码是：
.designers-item figure img {
display:inline;
position:relative;
z-index:10;
}
.designers-item figure figcaption {
display:inline;
position:absolute;
z-index:5;
-webkit-box-sizi
浏览 3提问于2017-03-21得票数 0
回答已采纳
1回答
在3d转换- css之后将div带到前面。
html、css、z-index
我有一张卡，上面有正面和背面的信息，当用户悬停在卡上时，它会切换并显示背面的信息。它在Firefox中工作，但不适用于Chrome/Safari，在这些浏览器中，尽管我尝试使用z-索引值，背面的文本还是会被阻塞。要考虑的一件事是，卡的背面可以溢出容器，这是故意的。有人能告诉我另外两个浏览器需要包括什么吗？
CSS基于以下文章：
实现：
示例截图：
在火狐中工作
在Chrome中不工作
#f1_container {
position: relative;
width: 250px;
height: 80px;
margin-left: 10px;
m
浏览 2提问于2016-03-17得票数 1
回答已采纳
1回答
在react中按下按钮时旋转的动画卡
css、reactjs、transform
我有React component Card，它有一个父div，里面有两个div (卡片的正面和背面)和父div下面的一个按钮。我想要的是在点击按钮时旋转它们。我做了悬停和变换，但我正在努力使这项工作的按钮点击。 基本上，它应该在每次点击时旋转180度。有什么想法吗？ 代码结构： function Card(){
return(
<>
<div className="parent">
<div className="front-side">
<div/>
<div classN
浏览 72提问于2021-01-30得票数 0
回答已采纳
1回答
CSS Hover Flipper不工作
html、css、hover、transform、flipper
创建一个基于div的flipper。正面和背面目前被编码为颜色，但背面最终将成为背景图像。
我在这里遵循了这个指南：，它在演示中还不起作用。我可能做错了什么。
以下是
HTML：
<div class="flip-container">
<div class="flipper">
<div class="front">
Front
</div>
<div class="back">
浏览 20提问于2014-05-23得票数 0
1回答
带有父转换的CSS转换不适用于iOS Safari
html、css、sass
我创建了这种情况的模型，因为我不能这么容易地创建一个可测试的版本。但要想得到要点：
@keyframes mainFadeIn {
0% {
opacity: 0;
transform: translateY(-3rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
// If I use this, without the transform, then everything works.
//
// @keyframes mainFadeIn {
// 0% {
//
浏览 0提问于2017-06-02得票数 2
7回答
Webkit背面可见性不起作用
css、webkit
我正在构建一个使用-webkit-transform: rotateY属性翻转卡片的简单示例。
几天前它还工作得很好，但是突然它停止工作了。效果仍然有效，但当我将鼠标悬停在卡片上时，正面应该会消失，以使背面可见。为此，我使用了-webkit-backface-visibility: hidden属性。但这似乎不再适用于chrome (无论是稳定版还是夜间构建版)。
下面是代码，以防我做了一些非常糟糕的事情
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="
浏览 1提问于2011-09-17得票数 42
回答已采纳
2回答
CSS动画(翻转)在Iphone/Safari上不起作用
html、ios、css、iphone
我得到了这个CSS动画，它可以将图像翻转到另一个图像，这是很棒的，因为我得到了这个论坛的帮助，如何添加供应商前缀，使其在Safari中工作。不幸的是，它仍然不能在Iphone上工作:(
有人知道怎么解决这个问题吗？
代码：
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div c
浏览 0提问于2015-12-01得票数 0
1回答
CSS 3D转换旋转:开始在第一次转换中移动
css、transform、css-transitions
我创造了一个3D的玩偶。它将内容排列在一个水平圆圈中，通过将transform: rotateY和translate应用于父轴，该圆圈在y轴上旋转。
问题是，转变的起源似乎是移动的，但只有在第一次过渡.在随后的旋转中，原点按其应有的方式保持在中心。
转载于：
Chrome 38 OSX
铬38 Win7
Firefox 30 OSX
Safari 7.0.6 OSX
IE 10 (Win7)有一个不同的错误:它在第一次转换时围绕x轴旋转。
Pen：
单击“旋转”：在过渡期间原点移动，单击“再次旋转”：原点不再移动，再次单击“旋转”：原点不移动
起初，我认为这是一个浏览器
浏览 4提问于2014-11-05得票数 1
1回答
CSS Flip:链接在Chrome中不起作用(webkit)
css、debugging、animation、cross-browser、core-animation
我试着在一些图片上创建一个简单的CSS翻转效果，并在背面放置链接…然而，这些链接在FireFox中有效，但在Chrome或Safari中不起作用。
我尝试了许多不同的方法，但我似乎无法弄明白。
/* Artists Flip */
.rsp-img-center {
margin: 0 auto;
}
.front img {
border-radius: 50%;
width: 120px;
height: 120px;
background-color: #000;
}
#f1_container {
position: relative;
margin: 10px auto;
wi
浏览 4提问于2014-08-16得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
