通过上一节,我们已经可以构建出3D的过渡效果了,本节我们来实现一个真正的3D对象–正方体和长方体。

正方体

html标签如下:

<div class="wrapper">
    <div class="card">
        <div class="card__face card__face--front">front</div>
        <div class="card__face card__face--back">back</div>
        <div class="card__face card__face--left">left</div>
        <div class="card__face card__face--right">right</div>
        <div class="card__face card__face--top">top</div>
        <div class="card__face card__face--bottom">bottom</div>
    </div>
</div>

同样和上一节一样,我们添加以下样式来实现3D效果,同时为不同的表面设置不同的颜色。

.wrapper {
    width: 100px;
    height: 100px;
    perspective: 300px;
}
.card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3D;
    position: relative;
}
.card__face {
    position: absolute;
    width: 100px;
    height:100px;
    border: 2px solid black;
    line-height: 100px;
    font-size: 22px;
    font-weight: bold;
    color: white;
    text-align: center;
}
front
back
left
right
top
bottom

现在看到的所有表面重叠到了一起,为每一个面添加相应的旋转:

.card__face--front {
    ...
    transform: rotateY(  0deg);
}
.card__face--back {
    ...
    transform: rotateY(180deg);
}
.card__face--left {
    ...
    transform: rotateY(-90deg);
}
.card__face--right {
    ...
    transform: rotateY( 90deg);
}
.card__face--top {
    ...
    transform: rotateX( 90deg);
}
.card__face--bottom {
    ...
    transform: rotateX(-90deg);
}

其中,rotateY( 0deg);是没有任何效果的,这里为了保持代码的一致性我们先保留。这一步中,只有前面和后面两个表面可以看的见,其他四个面均垂直于读者,我们几乎是看不见的(只能看到一个边缘)。为了更明显的观察,我们需要移动每个表面,由于每个面的宽高都是100像素,那么距离正方体中心也就是50个像素,所以我们将其相对于中心点拉远50个像素,也就是translateZ(50px)

front
back
left
right
top
bottom

注意:添加了translateZ(50px)之后,元素变大了,字体也看起来比较模糊,这是因为当应用3D transform时候,浏览器会用新的transform属性重新绘制之前的图像。 此时元素更靠近读者,因此为了不出现这种模糊,我们添加以下样式到.card元素:

.push--back { transform: translateZ(-50px); }
front
back
left
right
top
bottom

添加正方体的旋转样式以保证每一个面都能呈现给读者:

.card.show-front  { transform: translateZ(-50px) rotateY(   0deg); }
.card.show-right  { transform: translateZ(-50px) rotateY( -90deg); }
.card.show-back   { transform: translateZ(-50px) rotateY(-180deg); }
.card.show-left   { transform: translateZ(-50px) rotateY(  90deg); }
.card.show-top    { transform: translateZ(-50px) rotateX( -90deg); }
.card.show-bottom { transform: translateZ(-50px) rotateX(  90deg); }

最后添加转换延时:

.card { 
    ...
    transition: transform 1s; 
}
front
back
left
right
top
bottom
front
back
right
left
top
bottom

参考链接:

  1. Intro to CSS 3D transforms
  2. MDN transform
  3. css-tricks transform
  4. CSS参考手册
  1. 寻寻觅觅 -- Christine Welch
  2. Just the Way You Are -- Bruno Mars
  3. Despacito(Remix) -- Luis Fonsi;Daddy Yankee;Justin Bieber
  4. 没有什么不同 -- 曲婉婷
  5. 故乡--许巍
  6. Jar Of Love -- 曲婉婷
  7. I Really Like You -- Carly Rae Jepsen