Question

div {
    height: 41.4vmin;
    width: 30vmin;
    margin: 0.7vmin;
    border-radius: 1.3vmin;
    background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");
    background-size: contain;
}


@keyframes example {
  0% {}
  35% {background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");}
  36% {background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");}
  100% {background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");transform: rotateY(160deg);}
}

div:hover {
  
  animation-fill-mode: forwards;
  animation-name: example;
  animation-duration: 1s;

}

<div></div>

我不使用关键帧，因为我需要为每个动画设置唯一的URL。如果我这样做，那么创建者需要更多100个关键帧。我想这样做是因为转换可以设置不同的url方法js。但这不是我想要的。

div {
    height: 41.4vmin;
    width: 30vmin;
    margin: 0.7vmin;
    border-radius: 1.3vmin;
    background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");
    background-size: contain;
    transition: 
    /* step 1 */
    transform      1s,
    /* step 2 */
    background  0.0s 0.5s;
}



div:hover {
  transform: rotateY(160deg);
  background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");
}

  <div></div>

Answer 1

我的解决方案是，您可以创建位于front元素内的两个元素back和card-container，并相应地制作动画：

＆＃13;

$(document).ready(function () {
  $('.card-container').click(function () {
    $(this).toggleClass('clicked');
  });
});

＆＃13;

.card-container {
  position: relative;
  overflow: hidden;
  height: 41.4vmin;
  width: 30vmin;
  margin: 0.7vmin;
}

.card-container > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 1.3vmin;
  transition: transform 1s, background  0.0s 0.5s;
  transform-style: preserve-3d;
}

.card-container .front {
    background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");
    background-size: contain;
    background-color: black;
    transform: rotateY(0deg);
}

.card-container .back {
  background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");
  background-size: contain;
  transform: rotateY(180deg);
}

.card-container.clicked .front {
  transform: rotateY(180deg);
}

.card-container.clicked .back {
  transform: rotateY(0deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-container">
  <div class="front"></div>
  <div class="back"></div>
</div>

<div class="card-container">
  <div class="front"></div>
  <div class="back"></div>
</div>

＆＃13;

Answer 2

将转换移至悬停状态并调整延迟，您将完全相同：

<div class="card"></div>

public class DoWork(){

  var scheduleEntries = new List<ScheduleEntry>();
        File.ReadAllLines(Server.MapPath("App_Data/Classes.txt")).Select(i=>scheduleEntries.Add(new ScheduleEntry(i)));

  var maxRowCount = scheduleEntries.Max(i=>i.Ordinal);

  for (int k = 1; k <= maxRowCount; k++){
    var tableRow = new TableRow;
    // Monday
     var mondayCellItem = scheduleEntries.FirstOrDefault(i=>i.Ordinal == k && i.Day == "Monday")
    var mondayCell = new TableCell{
      Text = $"{mondayCellItem.Class}"

    // Tuesday, etc

    tableRow.Cells.Add(mondayCell);
    tableRow.Cells.Add(tuesdayCell);
    //etc
    }

  }

  internal class ScheduleEntry(){
    public string Day {get;set;}
    public int Ordinal {get;set;}
    public string ClassName {get;set;}

    public ScheduleEntry(string inRow){
      var values = inRow.Split(',');
      Day = values[1]; // should do some validation here
      Ordinal = int.Parse(values[2]); // and here
      ClassName = values[3]; // and here
  }
}
}

Answer 3

为什么需要100个URL才能执行此操作？您只需要卡片图像的正面和卡片图像的背面。

img {
      width:100%;
      border:1px solid #e0e0e0;
      border-radius:1vw;
    }

    .container {
      /* Position and Size the Container */
      position: absolute;
      top: 17%;
      bottom:0; /* Needed to keep the overall height larger than the card. */
      left: 20%;
      width: 25%;
 
      /* Will inherit to children only (not all descendants) */
      perspective: 900px; 
    }

    #card .front {
      /* Flip the front side of the card by rotating it around the y-axis. */
      transform: rotateY(180deg);
    }

    #card:hover {
      /* Rotate the card as a whole:  */
      transform: rotateY(180deg);
    }

    #card div {
      /* Forces both elements to come out of the normal flow and occupy the same space on the page. */
      position: absolute;

      /*
        The backface-visibility CSS property determines whether or not the back
        face of the element is visible when facing the user. The back face of 
        an element is always a transparent background, letting, when visible, 
        a mirror image of the front face be displayed. If your foreground element
        is opaque, this property may not need to be set.
      */
      backface-visibility: hidden;
    }

    #card {
      /*
        Indicates that the children of the element should be positioned in the 3D-space.
        And, pass any inherited perspective along to children.
      */
      transform-style: preserve-3d;

      /* 
        Changes to the transform property should take 1 second to
        change from their current value to their new value. 
      */
      transition: transform 1s cubic-bezier(.75,1.25,.5,1.25);
    }

<!-- The "container" will be the 3D space for us to work in.   -->
  <div class="container">

    <!-- The "card" is the single entity that we will manipulate. -->
    <div id="card">   

      <!-- The child elements make up pieces of the overall object.--> 
      <div class="front"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Ace_of_spades.svg/2000px-Ace_of_spades.svg.png"></div>
      <div class="back"><img src="https://thumb1.shutterstock.com/display_pic_with_logo/3172829/620603528/stock-vector-ace-of-spades-with-eyel-vintage-design-t-shirts-620603528.jpg"></div>
    </div>

  </div>

Answer 4

您需要使用具有回文定时的transition-timing-function，因此卡片图像转换始终位于中间。这方面的示例包括linear或ease-in-out（在下面合并）。

请注意，某些浏览器不支持transition上的background-image，因此您可能需要以不同的方式处理此效果，以便在IE中工作。

div {
  height: 41.4vmin;
  width: 30vmin;
  margin: 0.7vmin;
  border-radius: 1.3vmin;
  background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");
  background-size: contain;
  transition: transform 1s ease-in-out, background 0s .5s;
}

div:hover {
  transform: rotateY(160deg);
  background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");
}

<div></div>

如何制作没有关键帧但有过渡

4 个答案: