CSS3技術實現了許多神奇的效果，其中就包括制作圖片魔方。下面我們將通過CSS3的transform屬性實現一個簡單的圖片魔方。

/*定義魔方的樣式*/
.magic{
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.magic div{
position: absolute;
width: 200px;
height: 200px;
background-size:200px 200px;
box-shadow: 0 0 2px #666;
}
/*定義魔方的各個面*/
.magic .front{
transform: rotateY(0deg) translateZ(100px);
background-image: url('front.png');
}
.magic .back{
transform: rotateY(180deg) translateZ(100px);
background-image: url('back.png');
}
.magic .left{
transform: rotateY(-90deg) translateZ(100px);
background-image: url('left.png');
}
.magic .right{
transform: rotateY(90deg) translateZ(100px);
background-image: url('right.png');
}
.magic .top{
transform: rotateX(90deg) translateZ(100px);
background-image: url('top.png');
}
.magic .bottom{
transform: rotateX(-90deg) translateZ(100px);
background-image: url('bottom.png');
}
/*當鼠標懸停時，魔方會旋轉*/
.magic:hover{
transform: rotateX(360deg);
}

以上代碼中，我們首先定義了一個容器div，類名為magic。為了實現3D效果，我們給它設置了 transform-style:preserve-3d；同時也設定了 transition屬性，當鼠標懸停時，魔方會旋轉1s。

接下來，我們定義了魔方的各個面，用background-image添加圖片，同時以 transform屬性實現3D效果。比如，.magic .front即為魔方前面的面，用transform:rotateY(0deg) translateZ(100px)實現了將該面向前移動100px，同時以rotateY(0deg)將面繞Y軸旋轉了0度。

最后，當鼠標懸停在魔方上時，我們通過:hover偽類，使魔方繞X軸旋轉360度。