问题：

为什么CSS3卡翻转动画不工作？

翟鸿振

2023-03-14

卡片应该翻转的总宽度我指的是100%的宽度，但当我悬停在卡片上它翻转的宽度为50%。还有什么更好的方法来完成同样的任务吗？动画它应该与100%的宽度工作。

为什么卡宽50%时，悬停在它？

null

html {
  font-size: 0.625rem;
}

.card {
  position: relative;
  width: 30rem;
  height: 40rem;
  background-color: white;
  transform-style: preserve-3d;
  margin: 2rem auto;
  border: 1px solid #000;
}

.card .face {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transform-style: preserve-3d;
  transition: transform 1s ease;
  backface-visibility: hidden;
  transform: perspective(50rem) rotateY(0deg);
}

.card .face.face-front {
  background-color: #f36565;
}

.card .face.face-back {
  background-color: #1774ff;
  transform: perspective(50rem) rotateY(180deg);
}

.card:hover .face.face-front {
  transform: perspective(50rem) rotateY(180deg);
}

.card:hover .face.face-back {
  transform: perspective(50rem) rotateY(360deg);
}

html prettyprint-override"><div class="card">
  <div class="face face-front">
    <h1>Front</h1>
  </div>
  <div class="face face-back">
    <h1>Back</h1>
  </div>
</div>

null

共有2个答案

令狐声

2023-03-14

您可以在codepen中搜索，但无论如何，这是链接https://codepen.io/andymcfee/pen/eyahr html:

<div class="viewport">
  
  <div class="flip-card">
    <div class="card-front">
      Front!
    </div>
    <div class="card-back">
      Back!
    </div>
  </div>
  
  <div class="flip-card">
    <div class="card-front">
      Front!
    </div>
    <div class="card-back">
      Back!
    </div>
  </div>
  
  <div class="flip-card">
    <div class="card-front">
      Front!
    </div>
    <div class="card-back">
      Back!
    </div>
  </div>
  
  <div class="flip-card">
    <div class="card-front">
      Front!
    </div>
    <div class="card-back">
      Back!
    </div>
  </div>
  
  <div class="flip-card">
    <div class="card-front">
      Front!
    </div>
    <div class="card-back">
      Back!
    </div>
  </div>
  
  <div class="flip-card">
    <div class="card-front">
      Front!
    </div>
    <div class="card-back">
      Back!
    </div>
  </div>
  
  <div class="flip-card">
    <div class="card-front">
      Front!
    </div>
    <div class="card-back">
      Back!
    </div>
  </div>
  
  <div class="flip-card">
    <div class="card-front">
      Front!
    </div>
    <div class="card-back">
      Back!
    </div>
  </div>
  
  <div class="flip-card">
    <div class="card-front">
      Front!
    </div>
    <div class="card-back">
      Back!
    </div>
  </div>
  
  <div class="flip-card">
    <div class="card-front">
      Front!
    </div>
    <div class="card-back">
      Back!
    </div>
  </div>
  
  <div class="flip-card">
    <div class="card-front">
      Front!
    </div>
    <div class="card-back">
      Back!
    </div>
  </div>
  
  <div class="flip-card">
    <div class="card-front">
      Front!
    </div>
    <div class="card-back">
      Back!
    </div>
  </div>
  
</div>

CSS

@import "compass/css3";

$default-transition-duration: 500ms;
$perspective: 300;

/***
* CSS3 FLIP CARDS
* Markup for an element that a user can hover to reveal content on the back, like a card
* Browser Support: Safari, Firefox, Chrome, IE8+, and Touch Devices; (IE9 and below will not have any flip effect but will just change on hover)
***/

.flip-card {
  display: block;
  position: relative;
  z-index: 1000;
  width: 100px; 
  height: 100px;
  
  .card-front,
  .card-back {
    @include backface-visibility(hidden);
    @include single-transition(transform);
    display: block;
    height: 100%;
    position: absolute;
    width: 100%; 
  }

  .card-front {
    @include transform3d(perspective($perspective) rotateY(0));
    z-index: 900;
  }

  .card-back {
    @include rotateY(-180deg); //Using rotate instead of transform prevents the back of the card from flipping on page load because transition is only targeting transform. Super sweet. 
     z-index: 800;
  }

  &:hover {
    .card-front { 
      @include transform(rotateY(180deg)); //No 3D fallback
      @include transform3d(perspective($perspective) rotateY(180deg)); 
    }
    .card-back { 
      z-index: 950; //No transform fallback
      @include transform(rotateY(0deg)); //No 3D fallback
      @include transform3d(perspective($perspective) rotateY(0deg)); 
    }
  }
}




/*** Just for show... ***/

.flip-card {
  @include text-shadow(1px 1px 0 rgba(darken(#1B8CE8, 20%), .8) );
  color: #fff;
  cursor: pointer;
  float: left;
  font-weight: bold;
  margin: 10px;
  text-align: center;
  text-transform: uppercase;
  min-width: 100px;
  max-width: 400px;
  
  .card-front,
  .card-back {
    @include border-radius(5px);
    @include box-shadow(1px 1px 2px rgba(darken(#1B8CE8, 20%), .8));
    @include box-sizing(border-box);
    border: 1px solid darken(#1B8CE8, 40%);
    padding: 40px 0;
  }

  .card-front {
    @include box-sizing(border-box);
    background-color: #499bea; // Old browsers
    @include filter-gradient(#499bea, #207ce5, vertical);
        @include background-image(linear-gradient(top,  #499bea 0%,#207ce5 100%));

  }

  .card-back {
    @include box-shadow(0 0 20px rgba(darken(#1B8CE8, 10%), .8) inset);
        background-color: #478ce0; // Old browsers
        @include filter-gradient(#478ce0, #0263db, vertical); // IE6-9
        @include background-image(linear-gradient(top,  #478ce0 0%,#1168db 100%,#0263db 100%));
  } 
}



body {
  background-color: #e6f2f7; // Old browsers
  @include filter-gradient(#e6f2f7, #a0d8ef, horizontal); 
  @include background-image(radial-gradient(center, circle cover,  #e6f2f7 0%,#a0d8ef 100%));

}

.viewport {
  margin: 10px auto 0;
  width: 500px;
}

甘西岭

2023-03-14

希望这能有所帮助

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 
    Wrote a blog post about how it all works:
    http://andymcfee.com/2012/08/24/css3-flip-cards/
    -->
    
    <div class="viewport">
    
        <div class="flip-card">
            <div class="card-front">
                Front!
            </div>
            <div class="card-back">
                Back!
            </div>
        </div>
    
    </div>

</body>

</html>

CSS:

/***
* CSS3 FLIP CARDS
* Markup for an element that a user can hover to reveal content on the back, like a card
* Browser Support: Safari, Firefox, Chrome, IE8+, and Touch Devices; (IE9 and below will not have any flip effect but will just change on hover)
***/
.flip-card {
  display: block;
  position: relative;
  z-index: 1000;
  width: 100px;
  height: 100px;
}
.flip-card .card-front,
.flip-card .card-back {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transition: -moz-transform 500ms;
  -o-transition: -o-transform 500ms;
  -webkit-transition: -webkit-transform 500ms;
  transition: transform 500ms;
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}
.flip-card .card-front {
  -moz-transform: perspective(300) rotateY(0);
  -webkit-transform: perspective(300) rotateY(0);
  transform: perspective(300) rotateY(0);
  z-index: 900;
}
.flip-card .card-back {
  -moz-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  z-index: 800;
}
.flip-card:hover .card-front {
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -moz-transform: perspective(300) rotateY(180deg);
  -webkit-transform: perspective(300) rotateY(180deg);
  transform: perspective(300) rotateY(180deg);
}
.flip-card:hover .card-back {
  z-index: 950;
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -moz-transform: perspective(300) rotateY(0deg);
  -webkit-transform: perspective(300) rotateY(0deg);
  transform: perspective(300) rotateY(0deg);
}

/*** Just for show... ***/
.flip-card {
  text-shadow: 1px 1px 0 rgba(14, 85, 143, 0.8);
  color: #fff;
  cursor: pointer;
  float: left;
  font-weight: bold;
  margin: 10px;
  text-align: center;
  text-transform: uppercase;
  min-width: 100px;
  max-width: 400px;
}
.flip-card .card-front,
.flip-card .card-back {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 1px 1px 2px rgba(14, 85, 143, 0.8);
  -webkit-box-shadow: 1px 1px 2px rgba(14, 85, 143, 0.8);
  box-shadow: 1px 1px 2px rgba(14, 85, 143, 0.8);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #051e32;
  padding: 40px 0;
}
.flip-card .card-front {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #499bea;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF499BEA', endColorstr='#FF207CE5');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ5OWJlYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIwN2NlNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #499bea), color-stop(100%, #207ce5));
  background-image: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%);
  background-image: -webkit-linear-gradient(top, #499bea 0%, #207ce5 100%);
  background-image: linear-gradient(to bottom, #499bea 0%, #207ce5 100%);
}
.flip-card .card-back {
  -moz-box-shadow: 0 0 20px rgba(19, 113, 189, 0.8) inset;
  -webkit-box-shadow: 0 0 20px rgba(19, 113, 189, 0.8) inset;
  box-shadow: 0 0 20px rgba(19, 113, 189, 0.8) inset;
  background-color: #478ce0;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF478CE0', endColorstr='#FF0263DB');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ3OGNlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzExNjhkYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAyNjNkYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #478ce0), color-stop(100%, #1168db), color-stop(100%, #0263db));
  background-image: -moz-linear-gradient(top, #478ce0 0%, #1168db 100%, #0263db 100%);
  background-image: -webkit-linear-gradient(top, #478ce0 0%, #1168db 100%, #0263db 100%);
  background-image: linear-gradient(to bottom, #478ce0 0%, #1168db 100%, #0263db 100%);
}

body {
  background-color: #e6f2f7;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFE6F2F7', endColorstr='#FFA0D8EF');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZjJmNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2EwZDhlZiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -moz-radial-gradient(center, circle cover, #e6f2f7 0%, #a0d8ef 100%);
  background-image: -webkit-radial-gradient(center, circle cover, #e6f2f7 0%, #a0d8ef 100%);
  background-image: radial-gradient(circle cover at center, #e6f2f7 0%, #a0d8ef 100%);
}

.viewport {
  margin: 10px auto 0;
  width: 500px;
}

类似资料：

具有自动高度的CSS3翻转卡

问题内容：我正在使用一个教程使用CSS3和jQuery创建翻页卡效果，但在将高度调整为内容长度的同时仍然在中心水平位置翻转时遇到了问题。码：问题答案：这是 jsFiddle 上的可行解决方案。 JS：定义的高度不灵活，因此您看到的就是定义的高度。由于高度将不会保持恒定，因此前部或后部需要具有定义的高度，以匹配最高的元素。在示例中，较高，因此将其更新为相同的高度，从而使您能够在中心实
CSS3旋转动画

问题内容：无法使此动画图像正常工作，它应该进行360度旋转。我猜下面的CSS有点问题，因为它保持静止。问题答案：这是正确的动画CSS：有关代码的一些注意事项：您已将关键帧嵌套在规则中，这是不正确的不适用于绝对定位的元素看看caniuse：IE10不需要前缀
CSS3 动画

#animated_div{ width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1;
CSS3-3D翻转动画-IE10转换原点：保留3D解决方法

问题内容：浏览IE10的开发人员博客后，我发现它们不支持save-3d设置。他们确实提供了一种解决方法，但我似乎无法使其正常工作。下面的示例适用于Safari，Chrome和Firefox，但不适用于IE10。如果有人可以帮助我实现这一目标，我将非常感激。单击时，框应绕Y轴旋转以显示一些文本和绿色背景色。IE10中不是这种情况部分代码： HTML CSS 2ne 问题答案：我也似乎无法找
css3动画 - css 浮动动画怎么写呢？

类似这样，飘忽不定的感觉
图片翻转动画效果

iPad版腾讯视频翻转显示影片详情动画，path里也用到这个动画，用户点击列表上面某张缩略图片，图片翻转变大之后显示详情。动画效果请看视频。 [Code4App.com]
CSS3链动画

问题内容：我需要在某些文本上执行一系列动画处理，并且我打算使用CSS3。我的计划是使一些文本缓慢地在屏幕上向下移动，并到达屏幕的特定部分后，某些单词将被突出显示，最终文本将继续在屏幕上向下移动并消失，为进一步的文本留出空间。我的问题是，“链接”这些动画的最佳方法是什么。我是否应该有一个用于向下移动屏幕的动画，一个用于突出显示文本的单独动画以及一个用于向下移动屏幕其余部分的动画？然后，是否应该将
CSS3 - 动画 Animation

动画是进行形状变化和用元素创建动作的过程。 @keyframes 关键帧将控制CSS3中的中间动画步骤。带左动画的关键帧示例 - @keyframes animation { from {background-color: pink;} to {background-color: green;} } div { width: 100px; height: 100px;

为什么CSS3卡翻转动画不工作？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档