css:hover用法（8）transform位移、缩放、旋转效果(hover、transition、trasform)

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  float: left;
  position: relative;
  width: 500px;
  height: 750px;
  margin: 100px 200px;
  overflow: hidden;
}
.box > img {
  width: 500px;
  height: 750px;
}
.box > * {
  transition: 1s;
  position: absolute;
  left: 0px;
  top: 0px;
}
.box h2 {
  color: white;
  width: 200px;
  transform: translateX(20px) translateY(450px);
}
.box p {
  color: white;
}
.box p:nth-of-type(1) {
  transform: translateY(140px) translateX(-150px);
}
.box p:nth-of-type(2) {
  transform: translateY(180px) translateX(-150px);
  transition: 1s 0.1s;
}
.box p:nth-of-type(3) {
  transform: translateY(220px) translateX(-150px);
  transition: 1s 0.2s;
}
/*鼠标滑动效果*/
.box:hover p:nth-of-type(1) {
  transform: translateY(300px) translateX(10px);
}
.box:hover p:nth-of-type(2) {
  transform: translateY(350px) translateX(10px);
}
.box:hover p:nth-of-type(3) {
  transform: translateY(400px) tran