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>