/* -webkit-transition: all 0.8s; */
}
#img3{
-webkit-transform: rotateZ(180deg) translateZ(-150px);
}
#img4{
-webkit-transform: rotateX(90deg) translateZ(150px);
}
#img5{
-webkit-transform:rotateY(90deg) translateZ(150px);
}
#img6{
-webkit-transform: rotateY(-90deg) translateZ(150px);
}
/* div div:hover{
-webkit-transform: rotateX(270deg);
} */
</style>
</head>
<body>
<div style="margin-left: 100px;height:300px;width:300px;position:absolute;perspective: 1000px;">
<div id="box" style="transform-style: preserve-3d;height:300px;width:300px;position: relative;">
<img id="img1" src="1.jpg" />
<img id="img2" src="2.jpg" />
<img id="img3" src="3.jpg" />
<img id="img4" src="4.jpg" />
<img id="img5" src="5.jpg" />
<img id="img6" src="6.jpg" />
