CSS 转换技巧

Question

两件事:首先，当鼠标悬停在线条上时，我很难将线条更改为五种不同的颜色。第二件事，我有一个三 Angular 形和一个圆圈。很像这里的两个红色方 block link ，我想在三 Angular 形上提供 3D 动画，在圆形上提供 2D 效果。

<div class="transform">
  <div class="transform-line" id="line">HOVER OVER LINE</div>
  <div onmouseover="rotateYDIV()" id="rotate3D">
    <img src="http://images3.wikia.nocookie.net/__cb20071127055923/uncyclopedia/images/c/c1/Penrose_triangle.png" alt="3D triangle" />
  </div>
  <div onmouseover="rotateDIV()" id="rotate2D">
    <img src="http://www.collectorsheaven.info/images/products/1168.png" alt="2D circle" />
  </div>

</div>

div.transform-line {
  font-size: .95em;
  text-align: center;
  margin: 0px auto;
  margin-bottom: 5px;
  width: 200px;
  /*height: 5px;*/
  padding: 2px;
  /*background-color: #FF69B4;*/
  color: #ffffff;
  background-color: HotPink;
  transition: width 3s;
  /* Chrome and Safari */
  -webkit-animation-name: line;
  animation-name: line;
}

div.transform-line:hover {
  width: 600px;
  color: #000000;
}

@-webkit-keyframes W3C
/* Chrome and Safari */

{
  0% {
    background: Pink;
  }
  25% {
    background: DeepPink;
  }
  50% {
    background: #ffe0e5;
  }
  75% {
    background: HotPink;
  }
  100% {
    background: #ff9baa;
  }
}

@keyframes W3C {
  0% {
    background: Pink;
  }
  25% {
    background: DeepPink;
  }
  50% {
    background: #ffe0e5;
  }
  75% {
    background: HotPink;
  }
  100% {
    background: #ff9baa;
  }
}


/***** 2D & 3D *****/

#rotate2D,
#rotate3D {
  position: relative;
  margin: 10px;
}

我在 JSFiddle 中遇到问题.

Answer 1

您似乎遗漏了一些关于过渡和转换的事情。

Here's a working Fiddle

您的 CSS 需要进行如下修改才能使这些内容正常工作:

div.transform-line {
  font-size: .95em;
  text-align: center;
  margin: 0px auto;
  margin-bottom: 5px;
  width: 200px;
  padding: 2px;
  color: #ffffff;
  background-color: HotPink;
}

div.transform-line:hover {
  width: 600px;
  color: #000000;
  /* the animation name has to match the keyframes name below */
  animation: W3C 3s;
}

@keyframes W3C {
  0% {
    background: Pink;
    width: 300px;
  }
  25% {
    background: DeepPink;
  }
  50% {
    background: #ffe0e5;
  }
  75% {
    background: HotPink;
  }
  100% {
    background: #ff9baa;
    width: 600px;
  }
}


/***** circle *****/

#rotate2D {
  transition: transform 3s;
  transform-origin: 157px 157px;
}

#rotate2D:hover {
  transform: rotate(180deg);  
}

#rotate3D {
  position: relative;
  margin: 10px;
  transition: transform 3s;
  transform-origin: 140px 0;
}

#rotate3D:hover {
  transform: rotateY(180deg);
}

关于变换和关键帧动画，有很多需要了解的内容。

W3Schools 不是处理这类事情的最佳资源 - 尝试其中的一些资源。 https://css-tricks.com/snippets/css/keyframe-animation-syntax/
https://css-tricks.com/almanac/properties/t/transform/
http://learn.shayhowe.com/advanced-html-css/css-transforms/