Door Opening 3D Effect in CSS

Door opening 3D effect in CSS

You can use 'transform-origin' property ( http://www.w3schools.com/cssref/css3_pr_transform-origin.asp ).

Set it to something like: "-webkit-transform-origin: 0% 50%;"

Here is your example using that property: http://jsfiddle.net/aV76H/

Hope it helps!

CSS Transformation Create Door open effect and stay open

You can use -webkit-animation-fill-mode: forwards;

Mozilla Docs

JSFiddle

CSS Transform like open door

Add transform-origin: left

.container{  width: 100%;  height: 100%;  display: flex;  justify-content: center;  align-items: center;}.flipbox{    height: 420px;  width: 240px;  border: 18px solid grey;  }.flipbox-active{  height: 420px;  width: 240px;  background-color: #000;  transform-origin: left;  transition: transform .45s;    }.flipbox-active:hover{  transform: perspective(1200px) rotateY(40deg);}

<div class="container">  <div class="flipbox">    <div class="flipbox-active">    </div>  </div></div>

Rotate image from front view to left view with 3D effect

1. Modify rotateX to rotateY since left view makes use of the vertical axis.

2. Modify the transform-origin to left as we are transforming with the left side as the rotating point.

3. Apply the similar changes to the pseudo elements for the 3D look as mentioned by @kaiido. I have commented the changes made.

body {  height: 100vh;  margin: 0;}
.thumb {  width: 600px;  height: 400px;  perspective: 1000px;  margin: 100px; /* For snippet spacing */}
.thumb a {  display: block;  width: 100%;  height: 100%;  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");  background-size: 0, cover;  transform-style: preserve-3d;  transition: all 0.5s;}
.thumb:hover a {  transform: rotateY(45deg); /* 1 - From rotateX */  transform-origin: left; /* 2 - From bottom */}
.thumb a:after {  content: '';  position: absolute;  left: 0px;  bottom: 0;  width: 36px; /* Interchanged width and height because horizontal transformation is now vertical transformation */   height: 100%;  background: inherit;  background-size: cover, cover;  background-position: bottom;  transform: rotateY(90deg); /* 1 - From rotateX */  transform-origin: left; /* 2 - From bottom */}
.thumb a:before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.5);  box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);  transition: all 0.5s;  opacity: 0.15;  transform: rotateY(15deg) translateZ(-40px) scale(0.75); /* 3 - From rotateX */  transform-origin: bottom;}
.thumb:hover a:before {  opacity: 1;  box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);  transform: rotateY(0) translateZ(-60px) scale(0.85); /* 3 - From rotateX */}

<div class="thumb">  <a href="#"></a></div>

---

Related Topics