Question

两件事：首先，当鼠标悬停在它上面时，我很难将线条更改为五种不同的颜色。第二件事，我有一个三角形和一个圆圈。就像这个link的两个红色方块一样，我想在三角形上提供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/

CSS转换技巧

1 个答案: