我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

新年快乐，节日过得也差不多了，该上班了，今天制作一个楼级祝福来祝大家新春快乐，更上一层楼

实现效果：

码上掘金：

实现

新建一个类名为container的div，在里面建立多一层div，div里使用两个span来装着一些祝福的语句，为什么是两个？因为第一个作正常显示用，第二个作鼠标移上去的时候切换祝福语句，然后再复制多三个一样的div

<div class="container">
<div>
  <span>HAPPY</span>
  <span>兔年新运走鸿运</span>
</div>
<div>
  <span>NEW</span>
  <span>满面春风得意行</span>
</div>
<div>
  <span>YEAR</span>
  <span>愿君兔年美满乐</span>
</div>
<div>
  <span>2023</span>
  <span>更上一层楼!</span>
</div>
</div>

下面使用css来实现效果，给body标签设置一个背景色和最小高度100vh并将body里面的元素垂直水平居中

:root{
  font-size: 20px;
  font-family: '华文楷体';
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #c21f30;
}

再给.container里的第一层div设定样式，给它一个高度和字体大小，再设置line-height和高度一样，不然文字就居底了，然后overflow设为hidden，超出的文字就会被隐藏掉

.container > div{
  display: block;
  height: 6rem;
  line-height: 6rem;
  font-size: 6rem;
  overflow: hidden;
  color: #c21f30;
}

新增.container > div > span选择器，同样设置display为block，高度和.container > div的一样，缩小间距文字粗体并且居中

然后新增.container:hover > div > span选择器，当鼠标移到container时，span设定transform为translateY(-100%)，这样鼠标移上去的时候span向上移动了6rem，就显示了另一组文字了

.container > div > span{
  display: block;
  padding: 0 10px;
  height: 6rem;
  font-weight: bold;
  letter-spacing: -.2rem;
  text-align: center;
  transition: .3s transform ease-in-out;
}
.container:hover > div > span{
  transform: translateY(-100%);
}

通过:nth-child伪类选择器给4个div添加背景颜色，并设置第一个和第三个div的transform: rotateX(30deg)旋转30deg，第二个第四个div为-30deg

最后给.container选择器设置perspective属性，作用是设置从何处查看一个元素的角度，这样就可以看到立体透视的效果了

.container{
  perspective: 30rem;
}
.container > div:nth-child(1){
  background-color: #FAFAFA;
  transform: rotateX(30deg);
}
.container > div:nth-child(2){
  background-color: #EBEBEB;
  transform: translateY(-.5rem) rotateX(-30deg);
}
.container > div:nth-child(3){
  background-color: #FAFAFA;
  transform: translateY(-1rem) rotateX(30deg);
}
.container > div:nth-child(4){
  background-color: #EBEBEB;
  transform: translateY(-1.5rem) rotateX(-30deg);
}

「兔了个兔」创意投稿大赛——新春楼级祝福，祝您新的一年更上一层楼！

前言

实现