1. 首页
  2. 问题列表
  3. 为什么CSS3卡翻转动画不工作？
提问者：小点点

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


卡片应该翻转的总宽度我指的是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);
}
<div class="card">
  <div class="face face-front">
    <h1>Front</h1>
  </div>
  <div class="face face-back">
    <h1>Back</h1>
  </div>
</div>

null


共2个答案

匿名用户

希望这能有所帮助

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;
}

匿名用户

您可以在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;
}

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS