前言

上次的青训营主题创作没赶上，当时在写码上掘金迎新年的活动，然后发现错过时间了，这次入营版正好补上。作品主要用到了transform属性以及伪元素。

实现过程

立方体

先来看看立方体的部分，通过css实现3D效果已经不是什么稀奇事，也是因为在之前的学习中写过,所以就加入到这次的作品中了,大家可以结合这份代码阅读。

在HTML中，我们需要6个div来负责一个立方体的6个面，然后再一个父标签包裹起来，后面会通过控制这个父标签进行立方体的转动。（test是为了方便观察新加的）

<div class="wrapper">
  <div class="cube show">
    <div class="is_top">1</div>
    <div class="is_bottom">2</div>
    <div class="is_left">3</div>
    <div class="is_right">4</div>
    <div class="is_front">5</div>
    <div class="is_back">6</div>
    <div class="test"></div>
  </div>
</div>

CSS需要注意的是要在cube中添加 transform-style: preserve-3d;这样才使其子元素支持3D效果。同时，这一步也有个前提，就是需要在cube的父元素上添加perspective来设置透视效果。

图片.png

如果不设置会是这个样子，可以很明显的看出右边的面双边平行是等长的，而我们需要的是近大远小的效果。

完成以上步骤，就可以逐步实现每一个面，接下来需要用到transform的rotateX、rotateY、translateZ三个方法。

通过演示代码中的滑杆，可以很容易对这三个方法进行理解，但是还是有需要注意的地方,我们不难发现实现其中一面不只有一套参数，比如rotateX(0) rotateY(90) translateZ(-150)与rotateX(0) rotateY(-90) translateZ(150)都能将正方形贴在左面，可这有什么区别？如果仅凭以上的代码不好发现端倪，那就加上点文字试试。一图胜千言，我们在设置的过程还需要注意每一个面的正反。

设置完每一个面之后对立方体的设置也是一样的，所以就不做过多赘述了。

按钮动画

按钮的动画分为2个，一个是扩散的涟漪效果，二个是鼠标悬停出现文字。

HTML部分只有一个标签，CSS简单的定个位。

//HTML
<div class="btn"></div>

//CSS
.btn {
  cursor: pointer;
  position: absolute;
  left: calc(50% - 50px);
  bottom: 150px;
  width: 100px;
  height: 100px;
  background: url(https://pic.imgdb.cn/item/63c2353ebe43e0d30ec99c32.png)
    no-repeat center/cover;
}

首先介绍一下需要用到的两个伪元素

before 向选定的元素前插入内容。
after 向选定元素的最后子元素后面插入内容。

伪元素不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式。 ::before和::after添加的内容默认是inline元素。
使用这两个伪元素一定要添加content属性，不然浏览器不会显示该伪元素。通过以上的描述，我们先实现一个与btn本身贴合的after伪元素，然后再通过animation动画去控制伪元素的缩放以及透明度

.btn::after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  background: url(https://pic.imgdb.cn/item/63c2353ebe43e0d30ec99c32.png)
    no-repeat center/cover;
  transform-origin: center;
  transform: scale(1);
  animation: scale 3s infinite;
}
@keyframes scale {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

接下来再去实现一个before伪元素，使用absolute定位将其移动到btn的上方，再把btn的:hover选择器作用于before伪元素。

.btn::before {
	font-size:14px;
  text-align: center;
	color:#ccc;
	content:"新火试新茶，诗酒趁年华";
	height:20px;
	width:180px;
	background-color:#fff;
	position:absolute;
	left:-40px;
  top: -30px;
	border-radius:10px;
	opacity:0;
	transition:all .5s;
}
.btn:hover:before {
	opacity:1;
	transition:all 1s;
}

「青训营 X 码上掘金」CSS实现3D效果的名片

主题 1：我的名片

前言

实现过程

立方体

按钮动画