15 stunning examples of CSS 3D transforms

by Janeth Kent Date: 25-11-2020 css3 3D effects webdesign

Web designing requires a highly professional outlook and the know how of the correct procedures that go about making a design attractive. A factor that every designer should be familiar is the fact that HTML5 and CSS3 are parallel to each other and blend together. 

3D graphics, 3D Games and 3D Animations can be easily developed using both HTML5 and CSS3.

Rounded corners, gradients and drop shadows are well known features of CSS3, but beyond these there lie CSS transitions, transforms and animations. In combination they create effects never before achievable.

There are some 3D animations that find a practical usage and are created using CSS3 and HTML5

They are supported in Safari and Chrome, and shortly in Firefox 10 and Internet Explorer 10. They perform superbly on iOS devices, even on iPhone 3G and iPad.

Below are mentioned 15 fantastic examples:

3D Transform #1

div {
transform:
rotate3d(.5,-.866,0,15deg)
rotate(1deg)
box-shadow:
2em 4em 6em -2em rgba(0,0,0,.5),
1em 2em 3.5em -2.5em rgba(0,0,0,.5);
transition:
transform .4s ease,
box-shadow .4s ease;
border-radius: .5em;
&:hover {
transform:
rotate3d(0,0,0,0deg)
rotate(0deg);
}
}

3D Transform #2

div {
transform: perspective(1500px) rotateY(15deg);
border-radius: 1rem;
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
transition: transform 1s ease 0s;
&:hover {
transform: perspective(3000px) rotateY(5deg);
}
}

3D Transform #3

div {
transform:
perspective(800px)
rotateY(-8deg);
transition: transform 1s ease 0s;
border-radius: 4px;
box-shadow:
rgba(0, 0, 0, 0.024) 0px 0px 0px 1px,
rgba(0, 0, 0, 0.05) 0px 1px 0px 0px,
rgba(0, 0, 0, 0.03) 0px 0px 8px 0px,
rgba(0, 0, 0, 0.1) 0px 20px 30px 0px;
&:hover {
transform: perspective(800px) rotateY(-4deg);
}
}

3D Transform #4

div {
transform:
rotateX(51deg)
rotateZ(43deg);
transform-style: preserve-3d;
border-radius: 32px;
box-shadow:
1px 1px 0 1px #f9f9fb,
-1px 0 28px 0 rgba(34, 33, 81, 0.01),
28px 28px 28px 0 rgba(34, 33, 81, 0.25);
transition:
.4s ease-in-out transform,
.4s ease-in-out box-shadow;
&:hover {
transform:
translate3d(0px, -16px, 0px)
rotateX(51deg)
rotateZ(43deg);
box-shadow:
1px 1px 0 1px #f9f9fb,
-1px 0 28px 0 rgba(34, 33, 81, 0.01),
54px 54px 28px -10px rgba(34, 33, 81, 0.15);
}
}

3D Transform #5

div {
transform:
perspective(1000px)
rotateX(4deg)
rotateY(-16deg)
rotateZ(4deg);
box-shadow: 24px 16px 64px 0 rgba(0, 0, 0, 0.08);
border-radius: 2px;
}

3D Transform #6

div {
transform:
perspective(2000px)
translate3d(0px, -66px, 198px)
rotateX(-55deg)
scale3d(0.86, 0.75, 1)
translateY(50px);
border-radius: 5px;
will-change: transform;
transition: 0.4s ease-in-out transform;
&:hover {
transform: scale3d(1, 1, 1);
}
}

3D Transform #7

div {
transform:
perspective(750px)
translate3d(0px, 0px, -250px)
rotateX(27deg)
scale(0.9, 0.9);
border-radius: 20px;
border: 5px solid #e6e6e6;
box-shadow: 0 70px 40px -20px rgba(0, 0, 0, 0.2);
transition: 0.4s ease-in-out transform;
&:hover {
transform: translate3d(0px, 0px, -250px);
}
}

3D Transform #8

div {
transform:
perspective(600px)
rotateX(20deg);
border-radius: 6px;
}

3D Transform #9

div {
transform:
perspective(900px)
rotateX(60deg)
scale(0.7);
box-shadow: 0px 20px 100px #555;
transition:0.5s ease all;
&:hover {
transform:
rotate(0deg)
scale(1)
translateY(10px);
}
}

3D Transform #10

div {
transform:
scale(0.75)
rotateY(-30deg)
rotateX(45deg)
translateZ(4.5rem);
transform-origin: 50% 100%;
transform-style: preserve-3d;
box-shadow: 1rem 1rem 2rem rgba(0,0,0,0.25);
transition: 0.6s ease transform;
&:hover {
transform: scale(1);
}
&::before {
transform: translateZ(4rem);
&:hover {
transform: translateZ(0);
}
}
&::after {
transform: translateZ(-4rem);
&:hover {
transform: translateZ(-1px);
}
}
}

3D Transform #11

div {
border-radius: 1em;
perspective: 600px;
box-shadow:
0 0.125em 0.3125em rgba(0, 0, 0, 0.25),
0 0.02125em 0.06125em rgba(0, 0, 0, 0.25);
&::before {
border-radius: 0 0 1em 1em;
width: 100%;
height: 50%;
transform-origin: center top;
transform: rotateX(180deg);
background: #333232
linear-gradient(180deg,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.4));
transition: 0.7s ease-in-out transform;
}
&:hover::before {
transform: rotateX(0);
}
}

3D Transform #12

div {
transform:
perspective(800px)
rotateY(25deg) scale(0.9)
rotateX(10deg);
filter: blur(2px);
opacity: 0.5;
transition: 0.6s ease all;
&:hover {
transform:
perspective(800px)
rotateY(-15deg)
translateY(-50px)
rotateX(10deg)
scale(1);
filter: blur(0);
opacity: 1;
}
}

3D Transform #13


.layer {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s;
animation-fill-mode: forwards;
transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}
.layer:after {
font: 150px/0.65 'Pacifico', 'Kaushan Script', Futura, 'Roboto', 'Trebuchet MS', Helvetica, sans-serif;
content: 'PureA    css!';
white-space: pre;
text-align: center;
height: 100%;
width: 100%;
position: absolute;
top: 50px;
color: whitesmoke;
letter-spacing: -2px;
text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}
.layer:nth-child(1):after {
transform: translateZ(0px);
}
.layer:nth-child(2):after {
transform: translateZ(-1.5px);
}
.layer:nth-child(3):after {
transform: translateZ(-3px);
}
.layer:nth-child(4):after {
transform: translateZ(-4.5px);
}
.layer:nth-child(5):after {
transform: translateZ(-6px);
}
.layer:nth-child(6):after {
transform: translateZ(-7.5px);
}
.layer:nth-child(7):after {
transform: translateZ(-9px);
}
.layer:nth-child(8):after {
transform: translateZ(-10.5px);
}
.layer:nth-child(9):after {
transform: translateZ(-12px);
}
.layer:nth-child(10):after {
transform: translateZ(-13.5px);
}
.layer:nth-child(11):after {
transform: translateZ(-15px);
}
.layer:nth-child(12):after {
transform: translateZ(-16.5px);
}
.layer:nth-child(13):after {
transform: translateZ(-18px);
}
.layer:nth-child(14):after {
transform: translateZ(-19.5px);
}
.layer:nth-child(15):after {
transform: translateZ(-21px);
}
.layer:nth-child(16):after {
transform: translateZ(-22.5px);
}
.layer:nth-child(17):after {
transform: translateZ(-24px);
}
.layer:nth-child(18):after {
transform: translateZ(-25.5px);
}
.layer:nth-child(19):after {
transform: translateZ(-27px);
}
.layer:nth-child(20):after {
transform: translateZ(-28.5px);
}
.layer:nth-child(n+10):after {
-webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}
.layer:nth-child(n+11):after {
-webkit-text-stroke: 15px dodgerblue;
text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}
.layer:nth-child(n+12):after {
-webkit-text-stroke: 15px #0077ea;
}
.layer:last-child:after {
-webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}
.layer:first-child:after {
color: #fff;
text-shadow: none;
}
@keyframes ಠ_ಠ {
100% {
transform: rotateY(-40deg) rotateX(-43deg);
}
}

3D Transform #14

3D CSS CUBES

body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*="wall-"] p {
color: #fff;
font: 17px/1.2 Arial;
}
.box-logo {
text-transform: uppercase;
color: #fff;
font: 52px/210px 'Roboto Condensed', sans-serif;
font-weight: 700;
letter-spacing: -2px;
}
#b1 [class*="wall-"] {
background: rgba(255, 136, 16, 0.8);
background: -moz-linear-gradient(left, rgba(255, 136, 16, 0.8) 0%, rgba(255, 183, 55, 0.8) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 136, 16, 0.8)), color-stop(100%, rgba(255, 183, 55, 0.8)));
background: -webkit-linear-gradient(left, rgba(255, 136, 16, 0.8) 0%, rgba(255, 183, 55, 0.8) 100%);
background: -o-linear-gradient(left, rgba(255, 136, 16, 0.8) 0%, rgba(255, 183, 55, 0.8) 100%);
background: -ms-linear-gradient(left, rgba(255, 136, 16, 0.8) 0%, rgba(255, 183, 55, 0.8) 100%);
background: linear-gradient(to right, rgba(255, 136, 16, 0.8) 0%, rgba(255, 183, 55, 0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8810', endColorstr='#ffb737', GradientType=1);
-webkit-box-shadow: inset -65px -40px 102px 0px #E87309;
-moz-box-shadow: inset -65px -40px 102px 0px #E87309;
box-shadow: inset -65px -40px 102px 0px #E87309;
border: 1px solid rgb(247, 129, 18);
}
#b2 [class*="wall-"] {
background: rgba(3, 169, 244, 0.8);
background: -moz-linear-gradient(left, rgba(3, 169, 244, 0.8) 0%, rgba(0, 188, 212, 0.8) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(3, 169, 244, 0.8)), color-stop(100%, rgba(0, 188, 212, 0.8)));
background: -webkit-linear-gradient(left, rgba(3, 169, 244, 0.8) 0%, rgba(0, 188, 212, 0.8) 100%);
background: -o-linear-gradient(left, rgba(3, 169, 244, 0.8) 0%, rgba(0, 188, 212, 0.8) 100%);
background: -ms-linear-gradient(left, rgba(3, 169, 244, 0.8) 0%, rgba(0, 188, 212, 0.8) 100%);
background: linear-gradient(to right, rgba(3, 169, 244, 0.8) 0%, rgba(0, 188, 212, 0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#03a9f4', endColorstr='#00bcd4', GradientType=1);
-webkit-box-shadow: inset 35px -30px 102px 0px rgba(21, 101, 192, 0.71);
-moz-box-shadow: inset 35px -30px 102px 0px rgba(21, 101, 192, 0.71);
box-shadow: inset 35px -30px 102px 0px rgba(21, 101, 192, 0.71);
border: 1px solid rgba(8, 110, 156, 0.54);
}
#b3 [class*="wall-"] {
background: rgba(255, 190, 0, 0.8);
background: -moz-linear-gradient(left, rgba(255, 190, 0, 0.8) 0%, rgba(255, 225, 49, 0.8) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 190, 0, 0.8)), color-stop(100%, rgba(255, 225, 49, 0.8)));
background: -webkit-linear-gradient(left, rgba(255, 190, 0, 0.8) 0%, rgba(255, 225, 49, 0.8) 100%);
background: -o-linear-gradient(left, rgba(255, 190, 0, 0.8) 0%, rgba(255, 225, 49, 0.8) 100%);
background: -ms-linear-gradient(left, rgba(255, 190, 0, 0.8) 0%, rgba(255, 225, 49, 0.8) 100%);
background: linear-gradient(to right, rgba(255, 190, 0, 0.8) 0%, rgba(255, 225, 49, 0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbe00', endColorstr='#ffe131', GradientType=1);
-webkit-box-shadow: inset 10px 10px 113px 0px rgba(255, 190, 0, 1);
-moz-box-shadow: inset 10px 10px 113px 0px rgba(255, 190, 0, 1);
box-shadow: inset 0 -70px 113px 0px rgba(255, 190, 0, 0.55);
border: 1px solid rgba(255, 190, 0, 0.33);
}
#b4 [class*="wall-"] {
background: rgba(249, 82, 137, 0.8);
background: -moz-linear-gradient(left, rgba(249, 82, 137, 0.8) 0%, rgba(255, 135, 176, 0.8) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(249, 82, 137, 0.8)), color-stop(100%, rgba(255, 135, 176, 0.8)));
background: -webkit-linear-gradient(left, rgba(249, 82, 137, 0.8) 0%, rgba(255, 135, 176, 0.8) 100%);
background: -o-linear-gradient(left, rgba(249, 82, 137, 0.8) 0%, rgba(255, 135, 176, 0.8) 100%);
background: -ms-linear-gradient(left, rgba(249, 82, 137, 0.8) 0%, rgba(255, 135, 176, 0.8) 100%);
background: linear-gradient(to right, rgba(249, 82, 137, 0.8) 0%, rgba(255, 135, 176, 0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f95289', endColorstr='#ff87b0', GradientType=1);
-webkit-box-shadow: inset 30px -50px 192px 0px rgba(233, 30, 99, 1);
-moz-box-shadow: inset 30px -50px 192px 0px rgba(233, 30, 99, 1);
box-shadow: inset 30px -50px 192px 0px rgba(233, 30, 99, 1);
border: 1px solid rgba(233, 30, 99, 0.68);
}
#b5 [class*="wall-"] {
background: rgba(215, 224, 34, 1);
background: -moz-linear-gradient(left, rgba(215, 224, 34, 1) 0%, rgba(117, 191, 67, 1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(215, 224, 34, 1)), color-stop(100%, rgba(117, 191, 67, 1)));
background: -webkit-linear-gradient(left, rgba(215, 224, 34, 1) 0%, rgba(117, 191, 67, 1) 100%);
background: -o-linear-gradient(left, rgba(215, 224, 34, 1) 0%, rgba(117, 191, 67, 1) 100%);
background: -ms-linear-gradient(left, rgba(215, 224, 34, 1) 0%, rgba(117, 191, 67, 1) 100%);
background: linear-gradient(to right, rgba(215, 224, 34, 1) 0%, rgba(117, 191, 67, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d7e022', endColorstr='#75bf43', GradientType=1);
-webkit-box-shadow: inset 20px -20px 100px rgba(117, 191, 67, 0.8);
-moz-box-shadow: inset 20px -20px 100px rgba(117, 191, 67, 0.8);
box-shadow: inset 20px -20px 100px rgba(117, 191, 67, 0.8);
/*border: 1px solid rgba(88, 136, 35, 0.88);*/
}
#b6 [class*="wall-"] {
background: rgba(102, 61, 139, 0.8);
background: -moz-linear-gradient(left, rgba(102, 61, 139, 0.8) 0%, rgba(147, 111, 207, 0.8) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(102, 61, 139, 0.8)), color-stop(100%, rgba(147, 111, 207, 0.8)));
background: -webkit-linear-gradient(left, rgba(102, 61, 139, 0.8) 0%, rgba(147, 111, 207, 0.8) 100%);
background: -o-linear-gradient(left, rgba(102, 61, 139, 0.8) 0%, rgba(147, 111, 207, 0.8) 100%);
background: -ms-linear-gradient(left, rgba(102, 61, 139, 0.8) 0%, rgba(147, 111, 207, 0.8) 100%);
background: linear-gradient(to right, rgba(102, 61, 139, 0.8) 0%, rgba(147, 111, 207, 0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#663d8b', endColorstr='#936fcf', GradientType=1);
-webkit-box-shadow: inset -70px 30px 122px 0px rgba(90, 59, 118, 1);
-moz-box-shadow: inset -70px 30px 122px 0px rgba(90, 59, 118, 1);
box-shadow: inset -70px 30px 122px 0px rgba(90, 59, 118, 1);
border: 1px solid #634A8E;
}
#b7 [class*="wall-"] {
background: rgba(240, 52, 41, 0.8);
background: -moz-linear-gradient(left, rgba(240, 52, 41, 0.8) 0%, rgba(252, 92, 68, 0.8) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(240, 52, 41, 0.8)), color-stop(100%, rgba(252, 92, 68, 0.8)));
background: -webkit-linear-gradient(left, rgba(240, 52, 41, 0.8) 0%, rgba(252, 92, 68, 0.8) 100%);
background: -o-linear-gradient(left, rgba(240, 52, 41, 0.8) 0%, rgba(252, 92, 68, 0.8) 100%);
background: -ms-linear-gradient(left, rgba(240, 52, 41, 0.8) 0%, rgba(252, 92, 68, 0.8) 100%);
background: linear-gradient(to right, rgba(240, 52, 41, 0.8) 0%, rgba(252, 92, 68, 0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f03429', endColorstr='#fc5c44', GradientType=1);
-webkit-box-shadow: inset -70px -40px 192px 0px rgba(207, 55, 34, 1);
-moz-box-shadow: inset -70px -40px 192px 0px rgba(207, 55, 34, 1);
box-shadow: inset -70px -40px 192px 0px rgba(207, 55, 34, 1);
border: 1px solid #E83426;
}
#b2 .wall-4,
#b4 .wall-4,
#b5 .wall-4 {
animation: shadow 2s 1s ease-in both;
}
@keyframes shadow {
to {
box-shadow: -40px 50px 120px 3px rgba(0, 0, 0, 0.52);
}
}
.container-box {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
transform: scale(.5);
justify-content: center;
max-width: 3000px;
width: 100%;
float: left;
}
.box {
width: 270px;
height: 270px;
/*margin: 12% 0 7% 27%;*/
margin: 0 auto;
transform-style: preserve-3d;
/*animation: rotate 27s infinite ease-in;*/
}
[class*="wall-"] {
position: absolute;
text-align: center;
width: 210px;
height: 210px;
padding-left: 20px;
}
.wall-1 {
transform: translateX(-105px) rotateY(90deg);
}
.wall-2 {
transform: translateY(-105px) rotateX(90deg);
}
.wall-3 {
transform: translateZ(-105px);
}
.wall-4 {
transform: translateY(105px) rotateX(90deg);
}
.wall-5 {
transform: translateZ(105px);
}
.wall-6 {
transform: translateX(105px) rotateY(90deg);
}
@keyframes box1 {
22% {
transform: translate(0px, 500px) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
animation-timing-function: ease-out;
}
75% {
transform: translate(-50px, 5px) rotateX(120deg) rotateY(-35deg) rotateZ(180deg);
animation-timing-function: ease-in;
}
90% {
transform: translate(0px, 500px) rotateX(200deg) rotateY(-45deg) rotateZ(230deg);
animation-timing-function: ease-out;
}
95% {
transform: translate(20px, 230px) rotateX(275deg) rotateY(-35deg) rotateZ(300deg);
animation-timing-function: ease-in;
}
100% {
transform: translate(20px, 252px) rotateX(340deg) rotateY(-45deg) rotateZ(360deg);
animation-timing-function: ease-out;
}
}
@keyframes box2 {
22% {
transform: translateY(500px) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
animation-timing-function: ease-out;
}
75% {
transform: translate(-250px, 50px) rotateX(320deg) rotateY(-55deg) rotateZ(10deg);
animation-timing-function: ease-in;
}
90% {
transform: translate(-290px, 500px) rotateX(325deg) rotateY(-45deg) rotateZ(0deg);
animation-timing-function: ease-out;
}
95% {
transform: translate(-267px, 420px) rotateX(355deg) rotateY(-45deg) rotateZ(0deg);
animation-timing-function: ease-in;
}
100% {
transform: translate(-267px, 500px) rotateX(340deg) rotateY(-45deg) rotateZ(0deg);
animation-timing-function: ease-out;
}
}
@keyframes box3 {
22% {
transform: translateY(500px) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
animation-timing-function: ease-out;
}
75% {
transform: translate(-100px, 50px) rotateX(320deg) rotateY(-55deg) rotateZ(10deg);
animation-timing-function: ease-in;
}
90% {
transform: translate(-170px, 500px) rotateX(325deg) rotateY(-45deg) rotateZ(0deg);
animation-timing-function: ease-out;
}
95% {
transform: translate(-110px, 490px) rotateX(355deg) rotateY(-45deg) rotateZ(0deg);
animation-timing-function: ease-in;
}
100% {
transform: translate(-110px, 500px) rotateX(340deg) rotateY(-45deg) rotateZ(0deg);
animation-timing-function: ease-out;
}
}
@keyframes box4 {
20% {
transform: translate3d(0px, 500px, 0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
animation-timing-function: ease-out;
}
75% {
transform: translate3d(-50px, 50px, 30px) rotateX(200deg) rotateY(-35deg) rotateZ(180deg);
animation-timing-function: ease-in;
}
90% {
transform: translate3d(-80px, 550px, 30px) rotateX(340deg) rotateY(-45deg) rotateZ(230deg);
animation-timing-function: ease-out;
}
/*95%{ 
transform: translate3d(20px, 700px, 30px) rotateX(275deg) rotateY(-35deg) rotateZ(300deg) scale3d(1.075,1.075,1.075);
animation-timing-function: ease-in;
}*/
100% {
transform: translate3d(-100px, 745px, 30px) rotateX(338deg) rotateY(-44deg) rotateZ(360deg);
animation-timing-function: ease-out;
}
}
@keyframes box5 {
20% {
transform: translate3d(0px, 500px, 0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
animation-timing-function: ease-out;
}
75% {
transform: translate3d(-300px, 250px, 0px) rotateX(-25deg) rotateY(-40deg) rotateZ(300deg);
animation-timing-function: ease-in;
}
90% {
transform: translate3d(-470px, 700px, 30px) rotateX(-20deg) rotateY(-45deg) rotateZ(390deg);
animation-timing-function: ease-out;
}
95% {
transform: translate3d(-538px, 748px, 30px) rotateX(-20deg) rotateY(-43deg) rotateZ(358deg);
animation-timing-function: ease-in;
}
100% {
transform: translate3d(-538px, 748px, 30px) rotateX(-20deg) rotateY(-44deg) rotateZ(360deg);
animation-timing-function: ease-out;
}
}
@keyframes box6 {
20% {
transform: translate3d(20px, 320px, 0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) scale3d(.99, .99, .99);
animation-timing-function: ease-out;
}
75% {
transform: translate3d(120px, 0px, 0px) rotateX(270deg) rotateY(270deg) rotateZ(10deg) scale3d(.95, .95, .95);
animation-timing-function: ease-in;
}
90% {
transform: translate3d(150px, 320px, 30px) rotateX(300deg) rotateY(300deg) rotateZ(25deg) scale3d(.945, .945, .945);
animation-timing-function: ease-out;
}
95% {
transform: translate3d(220px, 310px, 30px) rotateX(370deg) rotateY(300deg) rotateZ(25deg) scale3d(.9, .9, .9);
animation-timing-function: ease-in;
}
100% {
transform: translate3d(220px, 320px, 30px) rotateX(340deg) rotateY(320deg) rotateZ(0deg) scale3d(.9, .9, .9);
animation-timing-function: ease-out;
}
}
@keyframes box7 {
20% {
transform: translate3d(0px, 320px, 0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) scale3d(.99, .99, .99);
animation-timing-function: ease-out;
}
75% {
transform: translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(-40deg) rotateZ(300deg) scale3d(.985, .985, .985);
animation-timing-function: ease-in;
}
90% {
transform: translate3d(350px, 320px, 30px) rotateX(20deg) rotateY(-50deg) rotateZ(390deg) scale3d(.975, .975, .975);
animation-timing-function: ease-out;
}
/*95%{ 
transform: translate3d(520px, 310px, 30px) rotateX(20deg) rotateY(-60deg) rotateZ(390deg) scale3d(.95,.95,.95);
animation-timing-function: ease-in;
}*/
100% {
transform: translate3d(520px, 320px, 30px) rotateX(-20deg) rotateY(-50deg) rotateZ(360deg) scale3d(.95, .95, .95);
animation-timing-function: ease-out;
}
}
#b1 {
transform: translateY(0px) rotateX(-20deg) rotateY(-40deg) rotateZ(20deg);
animation: box1 2s .25s cubic-bezier(.69, .59, .57, 2) both;
}
#b2 {
transform: translateY(0px) rotateX(35deg) rotateY(-40deg) rotateZ(30deg);
animation: box2 2s cubic-bezier(.69, .59, .57, 2) both;
}
#b3 {
transform: translateY(0px) rotateX(20deg) rotateY(-35deg) rotateZ(0deg);
animation: box3 2s .05s cubic-bezier(.69, .59, .57, 2) both;
}
#b4 {
transform: translateY(0px) rotateX(10deg) rotateY(-45deg) rotateZ(10deg);
animation: box4 2s .15s cubic-bezier(.69, .59, .57, 2.5) both;
}
#b5 {
transform: translateY(0px) rotateX(25deg) rotateY(-50deg) rotateZ(-10deg);
animation: box5 2.4s .15s cubic-bezier(.69, .59, .57, 2.5) both;
}
#b6 {
transform: translateY(0px) rotateX(40deg) rotateY(-25deg) rotateZ(20deg);
animation: box6 5s .05s cubic-bezier(.69, .59, .57, 1.7) both;
}
#b7 {
transform: translateY(0px) rotateX(40deg) rotateY(-45deg) rotateZ(5deg);
animation: box7 2.5s cubic-bezier(.72, .59, .57, 2) both;
}
.wrap {
width: 100%;
min-height: 700px;
height: 100%;
background: rgba(227, 234, 240, 1);
background: -moz-linear-gradient(top, rgba(227, 234, 240, 1) 0%, rgba(206, 223, 237, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(227, 234, 240, 1)), color-stop(100%, rgba(206, 223, 237, 1)));
background: -webkit-linear-gradient(top, rgba(227, 234, 240, 1) 0%, rgba(206, 223, 237, 1) 100%);
background: -o-linear-gradient(top, rgba(227, 234, 240, 1) 0%, rgba(206, 223, 237, 1) 100%);
background: -ms-linear-gradient(top, rgba(227, 234, 240, 1) 0%, rgba(206, 223, 237, 1) 100%);
background: linear-gradient(to bottom, rgba(227, 234, 240, 1) 0%, rgba(206, 223, 237, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3eaf0', endColorstr='#cedfed', GradientType=0);
}
.wrap-inner {
width: 700px;
margin: 0 auto;
}
.info {
display: block;
position: absolute;
z-index: 10;
padding: 15px;
width: 350px;
color: #777;
font-size: 27px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
opacity: 0;
transition: all .52s ease-in-out;
}
#b1 .info,
#b3 .info,
#b4 .info {
top: 130px;
left: 0px;
transform: translate(150px, -150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(.95);
}
#b2 .info,
#b5 .info {
top: 130px;
left: 0px;
text-align: right;
transform: translate(150px, -150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(.95);
}
#b1:hover>.info,
#b3:hover>.info,
#b4:hover>.info {
transform: translate(150px, -150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(1);
opacity: 1;
left: 300px;
top: 0;
}
#b2:hover>.info {
transform: translate(150px, -150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(1);
opacity: 1;
top: 450px;
left: -515px;
}
#b5:hover>.info {
opacity: 1;
top: 450px;
left: -570px;
}
<div class="wrap-inner">
  <div class="container-box">
    <div class="box" id="b1">
      <div class="wall-1">
      </div>
      <div class="wall-2">
      </div>
      <div class="wall-3">
      </div>
      <div class="wall-4">
      </div>
      <div class="wall-5"><span class="box-logo">90%</span>
      </div>
      <div class="wall-6"><span class="box-logo">HTML</span>
      </div>
    </div>
    <div class="box" id="b2">
      <div class="wall-1">
      </div>
      <div class="wall-2">
      </div>
      <div class="wall-3">
      </div>
      <div class="wall-4">
      </div>
      <div class="wall-5"><span class="box-logo pers">95%</span>
      </div>
      <div class="wall-6"><span class="box-logo">CSS</span>
      </div>
      <p class="info">css3 | sass | sass compass
      </p>
    </div>
    <div class="box" id="b3">
      <div class="wall-1">
      </div>
      <div class="wall-2">
      </div>
      <div class="wall-3">
      </div>
      <div class="wall-4">
      </div>
      <div class="wall-5"><span class="box-logo">60%</span>
      </div>
      <div class="wall-6"><span class="box-logo">jQuery</span>
      </div>
      <p class="info">jQuery Ui
      </p>
    </div>
    <div class="box" id="b4">
      <div class="wall-1">
      </div>
      <div class="wall-2">
      </div>
      <div class="wall-3">
      </div>
      <div class="wall-4">
      </div>
      <div class="wall-5"><span class="box-logo">65%</span>
      </div>
      <div class="wall-6"><span class="box-logo">Ai</span>
      </div>
      <p class="info">svg
      </p>
    </div>
    <div class="box" id="b5">
      <div class="wall-1">
      </div>
      <div class="wall-2">
      </div>
      <div class="wall-3">
      </div>
      <div class="wall-4">
      </div>
      <div class="wall-5"><span class="box-logo">80%</span>
      </div>
      <div class="wall-6"><span class="box-logo">Ps</span>
      </div>
      <p class="info">Ma-No Web
      </p>
    </div>
  </div>
</div>

3D Transform #15

Finally, here's the HTML markup for five randomly selected photos:

<div id="stage" style="padding-left: 180px; height: 160px;"> 
<div id="spinner" style="-webkit-transform-origin: 180px 0 0;"> 
<img style="-webkit-transform: rotateY(0deg) translateX(180px); padding: 0 0 0 160px;" src="images/img1.jpg" width="200" height="160" alt=""> 
<img style="-webkit-transform: rotateY(-72deg) translateX(180px); padding: 0 0 0 147px;" src="images/img2.jpg" width="213" height="160" alt=""> 
<img style="-webkit-transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 120px;" src="images/img3.jpg" width="240" height="160" alt=""> 
<img style="-webkit-transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 147px;" src="images/img4.jpg" width="213" height="160" alt=""> 
<img style="-webkit-transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 122px;" src="images/img5.jpg" width="238" height="160" alt=""> 
</div> 
</div>
 
by Janeth Kent Date: 25-11-2020 css3 3D effects webdesign hits : 13576  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Related Posts

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

Awesome JavaScript Games and Js Software to create Games

Best sites js13kGames 2019 - Highlights from the js13kGames 2019 competition. js13kGames 2018 - 13 Games in ≤ 13kB of JavaScript. js13kGames 2017 - Build a game in 13kB or less with js13kGames. Adventure Triangle:…

Introduction to BEM (Block Element Modifier)

Problems with naming CSS classes I think I might not be the only one with this experience: after finally grasping all the important concepts regarding CSS I wanted to start giving…

Parallax Landscape Scenes Built Entirely With CSS and HTML

Web design trends come and go, but the parallax effect has, well, stuck around. Parallax scrolling has had a big impact on user interface design, on both websites and mobile…

Fullscreen Background Video HTML5 And CSS cross-browser

Full-screen Background Video is a way to present your website playing a video in the background without disturbing its content. It makes your website very modern and different. So, in…

Useful Tutorials on SVG & CSS3 Animation

There isn't just one way to do SVG and CSS3 animations. Animation is one such area which has been quite complicated until recently. Today we're going to look some tutorials…

Guide to viewport units vw, vh, vmin and vmax

The viewport is the area where the browser renders the site. This is your screen minus the reserved space of the browser chrome. Sometimes you want to size an element…

CSS Flexbox : some tools

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes…

Ideas shaping web design today

Web design in order to succeed needs two things: innovation and imitation. Unfortunately, the last one often wins. Web designers love to learn, study and use the latest trends, and then…

6 Free Film Effect Photoshop Actions

Film and graphic lovers rejoice! Today we give us this little pack film effect Photoshop actions!  Photoshop actions allow designers to automate common sequences for increased efficiency. If you do much…

Clicky