CSS3之正方体旋转

html代码

<ul>
  <li>你</li>
  <li>真</li>
  <li>帅</li>
  <li>啊</li>
  <li>!</li>
  <li>帅</li>
</ul>

css代码

// 给子元素添加绝对定位 以便能进行平移 旋转
ul > li {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  position: absolute;
  list-style: none;
  line-height: 400px;
  font-size: 35px;
}
// 給父元素添加相对定位
ul {
  position: relative;
//给父元素添加效果透视
  -webkit-transform-style: preserve-3d;
}
ul:hover {
  transform: rotateX(360deg) rotateY(360deg);
  transition: all 10s;
  cursor: pointer;
}
li:nth-child(1) {
  background-color: antiquewhite;
  transform: translateZ(200px);
}
li:nth-child(2) {
  background-color: aqua;
  transform: rotateX(90deg) translateZ(200px);
}
li:nth-child(3) {
  background-color: aquamarine;
  transform: rotateX(180deg) translateZ(200px);
}
li:nth-child(4) {
  background-color: bisque;
  transform: rotateX(270deg) translateZ(200px);
}
li:nth-child(5) {
  background-color: blueviolet;
  transform: rotateY(90deg) translateZ(200px);
}
li:nth-child(6) {
  background-color: yellowgreen;
  transform: rotateY(-90deg) translateZ(200px);
}

效果