代码之家 › 专栏 › 技术社区 › Jack Maessen

如何使用变换:以悬停方式旋转?

transform css html

Jack Maessen · 技术社区 · 8 年前

我试图在悬停状态下旋转3个div(立方体),但似乎不是每个浏览器都能处理这个问题。只有IE边缘没有问题。 Firefox在悬停的前2个div上运行得很好,但在悬停的第3个div上,立方体会消失。 Chrome在悬停时开始摇晃所有立方体。

我的代码有问题吗?

.cube-a,
.cube-b,
.cube-c {
  margin-top: 100px;
  margin-left: 10px;
  float: left;
  margin-right: 80px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotateX(108deg) rotateY(16deg) rotateZ(192deg);
}

.cube-a .tcface,
.cube-b .tcface,
.cube-c .tcface {
  width: 100%;
  height: 100%;
  position: absolute;
}

.cube-a .cube-a-face {
  background-color: #f4e00d;
  /* geel */
  transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
  height: 100px;
}

.cube-b .cube-b-face {
  background-color: #8db63c;
  /* groen */
  transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
  height: 100px;
}

.cube-c .cube-c-face {
  background-color: #009de0;
  /* blauw */
  transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
  height: 100px;
}

.cube-a .cube-a-right,
.cube-c .cube-c-right {
  background-color: #8db63c;
  /* groen */
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-100px);
  transform-origin: 0 0;
  width: 100px;
  height: 100px;
}

.cube-b .cube-b-right {
  background-color: #f4e00d;
  /* geel */
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-100px);
  transform-origin: 0 0;
  width: 100px;
  height: 100px;
}

.cube-a .cube-a-bottom,
.cube-b .cube-b-bottom {
  background-color: #009de0;
  /* blauw */
}

.cube-c .cube-c-bottom {
  background-color: #f4e00d;
  /* geel */
}

.cube-a-bottom,
.cube-b-bottom {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
}

.cube-a-face,
.cube-a-right,
.cube-a-bottom,
.cube-b-face,
.cube-b-right,
.cube-b-bottom,
.cube-c-face,
.cube-c-right,
.cube-c-bottom {
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 92px;
  font-weight: 500;
  font-family: "Simply Rounded Bold";
}

.cube-a:hover,
.cube-b:hover,
.cube-c:hover {
  -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
  -moz-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
  -ms-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
  -o-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
}

<div class="cube-a">
  <div class="tcface cube-a-face">A</div>
  <div class="tcface cube-a-right">B</div>
  <div class="tcface cube-a-bottom">C</div>
</div>

<div class="cube-b">
  <div class="tcface cube-b-face">B</div>
  <div class="tcface cube-b-right">A</div>
  <div class="tcface cube-b-bottom">C</div>
</div>

<div class="cube-c">
  <div class="tcface cube-c-face">C</div>
  <div class="tcface cube-c-right">B</div>
  <div class="tcface cube-c-bottom">A</div>
</div>

这是我的小提琴:

https://jsfiddle.net/8vuj7peb/100/

1 回复 | 直到 8 年前

Tom Groot 8 年前

尝试添加 -webkit-transition: all 1s; 和 transition: all 1s; . 这是 transition property ,进行转换 1s 长的

.cube-a,
.cube-b,
.cube-c {
  margin-top: 100px;
  margin-left: 10px;
  float: left;
  margin-right: 80px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotateX(108deg) rotateY(16deg) rotateZ(192deg);
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
}

.cube-a .tcface,
.cube-b .tcface,
.cube-c .tcface {
  width: 100%;
  height: 100%;
  position: absolute;
}

.cube-a .cube-a-face {
  background-color: #f4e00d;
  /* geel */
  transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
  height: 100px;
}

.cube-b .cube-b-face {
  background-color: #8db63c;
  /* groen */
  transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
  height: 100px;
}

.cube-c .cube-c-face {
  background-color: #009de0;
  /* blauw */
  transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
  height: 100px;
}

.cube-a .cube-a-right,
.cube-c .cube-c-right {
  background-color: #8db63c;
  /* groen */
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-100px);
  transform-origin: 0 0;
  width: 100px;
  height: 100px;
}

.cube-b .cube-b-right {
  background-color: #f4e00d;
  /* geel */
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-100px);
  transform-origin: 0 0;
  width: 100px;
  height: 100px;
}

.cube-a .cube-a-bottom,
.cube-b .cube-b-bottom {
  background-color: #009de0;
  /* blauw */
}

.cube-c .cube-c-bottom {
  background-color: #f4e00d;
  /* geel */
}

.cube-a-bottom,
.cube-b-bottom {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
}

.cube-a-face,
.cube-a-right,
.cube-a-bottom,
.cube-b-face,
.cube-b-right,
.cube-b-bottom,
.cube-c-face,
.cube-c-right,
.cube-c-bottom {
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 92px;
  font-weight: 500;
  font-family: "Simply Rounded Bold";
}

.cube-a:hover,
.cube-b:hover,
.cube-c:hover {
  -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
  -moz-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
  -ms-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
  -o-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
}

<div class="cube-a">
  <div class="tcface cube-a-face">A</div>
  <div class="tcface cube-a-right">B</div>
  <div class="tcface cube-a-bottom">C</div>
</div>

<div class="cube-b">
  <div class="tcface cube-b-face">B</div>
  <div class="tcface cube-b-right">A</div>
  <div class="tcface cube-b-bottom">C</div>
</div>

<div class="cube-c">
  <div class="tcface cube-c-face">C</div>
  <div class="tcface cube-c-right">B</div>
  <div class="tcface cube-c-bottom">A</div>
</div>