我想写一个鼠标移入然后这个正方体会向左转90度的3D的效果，也就是把它原本在右边的那个面变成正对我的，请问怎么写，css3的3D我不太会啊
http://www.jb51.net/css/470050.html
<!DOCTYPE html>
3D六边形
<br> .dice{<br> text-align: center;<br> font-size: 120px;<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> margin-top: 300px;<br> }<br> .sixDice{<br> transform-style: preserve-3d;<br> transform: rotateX(45deg) rotateZ(45deg);<br> }<br> .sixDice:hover{<br> animation: star 10s linear infinite;<br> }<br> @keyframes star{<br> 0%{transform: rotateY(0deg) rotateX(45deg) rotateZ(45deg);}<br> 100%{transform: rotateY(360deg) rotateX(45deg) rotateZ(45deg);}<br> }<br> .first{<br> height: 200px;<br> width: 200px;<br> position: absolute;<br> background-color: #409EFF;<br> top: 0;<br> background-color: rgba(64,158,255,1);<br> transform:translate3d(0,0,100px);<br> }<br> .second{<br> height: 200px;<br> width: 200px;<br> background-color: rgba(255,215,0,1);<br> transform: rotate3d(1,0,0,90deg);<br> position: absolute;<br> bottom: -100px;<br> }<br> .third{<br> height: 200px;<br> width: 200px;<br> background-color: rgba(60,179,113,1);<br> transform: rotate3d(0,1,0,90deg);<br> position: absolute;<br> left: -100px;<br> top: 0;<br> }<br> .four{<br> height: 200px;<br> width: 200px;<br> background: rgba(255,0,0,1);<br> transform: rotate3d(0,1,0,90deg);<br> position: absolute;<br> right: -100px;<br> top: 0;<br> }<br> .five{<br> height: 200px;<br> width: 200px;<br> background-color: rgba(230,162,60,1);<br> position: relative;<br> transform:translate3d(0,0,-100px);<br> }<br> .six{<br> height: 200px;<br> width: 200px;<br> background-color: rgba(144,147,153,1);<br> transform: rotate3d(1,0,0,90deg);<br> position: absolute;<br> top: -100px;<br> }<br>