DIV rotation expect the image

by Kheema Pandey

HTML

<div class="imagecontainer">
        <img src="http://lorempixel.com/300/300" />
    
  </div>
  
    <div class="workcontainer4">
                               
  </div>

CSS

.imagecontainer{
margin:50px auto;
 display:block;
width:200px;
height:200px;
overflow:hidden;
border-radius: 28px;
 transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
 -webkit-transform: rotate(45deg); /* Safari and Chrome */
position:relative;
}
 .imagecontainer img{
 transform: rotate(-45deg);
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Safari and Chrome */
  position:absolute;
  top:-100px;
  left:-100px;
 }

.workcontainer4{
  width: 300px;
  height: 300px;
  margin-left:183px;
  margin-top:9px;
  font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
  background-color: #68477c;
  background-position: 50% 50%;
  -webkit-transform: rotateX(0deg) rotateY(50deg) rotateZ(-45deg);
  transform: rotateX(0deg) rotateY(60deg) rotateZ(-45deg);
  -webkit-transform-origin: 0 100% 0;
  transform-origin: 0 100% 0;
  position:absolute;
    background-image:url("http://lorempixel.com/300/300");
}