LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Fun with CSS

Front

This is on front.

Back

Top

This is what will be shown.

Bottom

Left

Right

Front

This is on front.

Back

Top

Bottom

This is what will be shown.

Left

Right

Front

This is on front.

Back

Top

Bottom

Left

This is what will be shown.

Right

Front

This is on front.

Back

Top

Bottom

Left

Right

This is what will be shown.

Front

This is on front.

Back

This is what will be shown.

Top

Bottom

Left

Right

Front

This is on front.

Back

This is what will be shown.

Top

Bottom

Left

Right

Front

This is on front.

Back

Top

This is what will be shown.

Bottom

Left

Right

Front

This is on front.

Back

Top

Bottom

This is what will be shown.

Left

Right

Front

This is on front.

Back

Top

Bottom

Left

This is what will be shown.

Right

Front

This is on front.

Back

Top

Bottom

Left

Right

This is what will be shown.

Front

This is on front.

Back

This is what will be shown.

Top

Bottom

Left

Right

Front

This is on front.

Back

This is what will be shown.

Top

Bottom

Left

Right

Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
Kitten
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 100px;
  font-family: Arial, sans-serif;
}

h1, h2, h3, p {
  margin: 0 0 1em;
}

.wrap:after {
  content: "";
  display: block;
  clear: both;
}

.box-rotate-wrap {
  float: left;
  margin: 0 30px 30px 0;
  perspective: 1000px;
}

.box, .box > div {
  width: 200px;
  height: 200px;
}

.box-rotate {
  position: relative;
  transition: all 0.8s ease;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -100px);
}

.box-rotate > div {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: #fff;
  padding: 20px;
  overflow: auto;
}

.box-rotate img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.box-rotate .front {
  background: red;
  z-index: 2;
  transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 100px);
}

.box-rotate .back {
  background: orange;
  transform: rotate3d(0, 1, 0, 180deg) rotate(180deg) translate3d(0, 0, 100px);
}

.box-rotate .top {
  background: purple;
  height: 200px;
  transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 100px);
}

.box-rotate .bottom {
  background: blue;
  height: 200px;
  transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 100px);
}

.box-rotate .left {
  background: yellow;
  transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 100px);
}

.box-rotate .right {
  background: green;
  transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 100px);
}

.box-rotate-top:hover {
  transform: translate3d(0, 0, -100px) rotate3d(1, 0, 0, -90deg);
}

.box-rotate-bottom:hover {
  transform: translate3d(0, 0, -100px) rotate3d(1, 0, 0, 90deg);
}

.box-rotate-left:hover {
  transform: translate3d(0, 0, -100px) rotate3d(0, 1, 0, 90deg);
}

.box-rotate-right:hover {
  transform: translate3d(0, 0, -100px) rotate3d(0, 1, 0, -90deg);
}

.box-rotate-back:hover {
  transform: translate3d(0, 0, -100px) rotate3d(1, 0, 0, -180deg);
}

.box-rotate-gyro .back {
  width: 200px;
  height: 200px;
  transform: rotate3d(0, 1, 0, 180deg) rotate(90deg) translate3d(0px, 0px, 100px);
}

.box-rotate-gyro:hover {
  transform: translate3d(0, 0, -100px) rotate3d(1, 1, 0, -180deg);
}

.box.box-blend div {
  background: #fff;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
}
Host Instantly Drag and Drop Website Builder

 

Description

Adjustable size 3D boxes using pure HTML/CSS. SASS/SCSS recommended for easy math using variables for box sizes.
Term
Mon, 11/27/2017 - 22:10

Related Codes

Pen ID
Pen ID
Pen ID