所需要的技術有：
1、position（定位）
首先要了解position存在的意義：
元素可以使用的頂部，底部，左側和右側屬性定位。
然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決於定位方法。
這里會用到的是absolute 定位，也就是絕對定位，這個絕對定位是相對於離它最近的已定位父元素來說的。
除此之外比較常用到的有fixed 定位，它的定位是相對於瀏覽器窗口是固定位置，不管什么動了，它都不會動。
還有就是relative 定位，它的定位是相對於它原本位置來說的，通常用來作為絕對定位元素的容器塊。
2、transform（轉換）
transform屬性就是讓我們可以讓元素在2D和3D之間轉變，比如讓元素旋轉，縮放，移動，傾斜等。
而我們這次所用到的就是transform--style屬性，用來指定嵌套元素是怎樣在三維空間中呈現。
以及rotateX() 、translateZ()和rotateY()這三個方法，即圍繞其在一個給定度數Y軸、X軸或Z軸旋轉的元素。
3、animation（動畫）
要創建 CSS3 動畫，你需要了解 @keyframes 規則。
@keyframes 規則是創建動畫。
@keyframes 規則內指定一個 CSS 樣式和動畫將逐步從目前的樣式更改為新的樣式。
animation是所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
可以使用的屬性有規定 的@keyframes 動畫的名稱、動畫花費的時間、速度曲線、播放次數、是否逆向播放等等。
源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.out{
position: absolute;
top: 50%;
left: 45%;
transform-style: preserve-3d;
animation: change 6s linear infinite;
}
.out>div{
width: 308px;
height: 308px;
position: absolute;
top: 50%;
left: 50%;
}
.font{
margin-left: -154px;
margin-top: -154px;
background-color: blue;
position: absolute;
border: 5px solid blue;
transform: translateZ(154px);
}
.after{
margin-left: -154px;
margin-top: -154px;
background-color: yellow;
position: absolute;
border: 5px solid yellow;
transform: translateZ(-154px);
}
.left{
margin-left: -154px;
margin-top: -154px;
background-color: red;
position: absolute;
border: 5px solid red;
transform: rotateY(90deg) translateZ(154px);
}
.right{
margin-left: -154px;
margin-top: -154px;
background-color: green;
position: absolute;
border: 5px solid green;
transform: rotateY(-90deg) translateZ(154px);
}
.up{
margin-left: -154px;
margin-top: -154px;
background-color: orange;
position: absolute;
border: 5px solid orange;
transform: rotateX(90deg) translateZ(154px);
}
.down{
margin-left: -154px;
margin-top: -154px;
background-color: fuchsia;
position: absolute;
border: 5px solid fuchsia;
transform: rotateX(-90deg) translateZ(154px);
}
@keyframes change{
0% {
transform: translateZ(154px) rotateX(360deg) rotateY(100deg);
}
}
</style>
</head>
<body>
<div class="out">
<div class="font"></div>
<div class="after"></div>
<div class="left"></div>
<div class="right"></div>
<div class="up"></div>
<div class="down"></div>
</div>
</body>
</html>
效果圖：圖片是動態的，在此放置靜態效果圖：
