LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS 3d box

Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa debitis, nam ad doloremque temporibus cupiditate perspiciatis amet, iusto, dicta esse ea. Ipsa velit dolor corporis, facilis iste unde ex laboriosam! lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa debitis, nam ad doloremque temporibus cupiditate perspiciatis amet, iusto, dicta esse ea. Ipsa velit dolor corporis, facilis iste unde ex laboriosam! lorem

CSS
body {
  margin: 0;
  padding: 0;
  background: #FFA07A;
  font-family: 'Oswald', sans-serif;
}
.box {
  positon: absolute;
  width: 400px;
  height: 400px;
  margin: 10% auto ;
  background: #fff;
  box-shadow: -10px 5px 30px rgba(0,0,0,.5);
  transition: .5s;
  transform: skewY(-10deg);
  box-sizing: border-box;
}
.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: -25px;
  width: 25px;
  height: 100%;
  background: lightgrey;
  transform-origin: right bottom;
  transform: skewY(45deg);
}
.box::after {
  content: '';
  position: absolute;
  top: -25px;
  left: 0;
  width: 100%;
  height: 25.7px;
  background: #efefef;
  transform-origin: bottom left;
  transform: skewX(45deg);
}
.box h3 {
  position: relative;
  background: #169fff;
  color: #fff;
  text-align: center;
  margin: 40px 0 0;
  padding: 8px 0;
  font-size: 36px;
  text-transform: uppercase;
  text-shadow: -2px 2px 10px rgba(0,0,0,.5);
}
.box h3:before{
  content:'';
  position:absolute;
  top: 0;
  left: -25px;
  width: 25px;
  height:100%;
  background: #085a93; 
  transform-origin: top right;
  transform: skewY(45deg);
}
.box p {
  padding: 0 20px;
  color: #262222;
  text-align: center;
  font-size: 18px;
}

Description

CSS 3d box made with css. based on the tutorial: Online Tutorials
Term
Wed, 12/06/2017 - 19:44

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv