Tự Tay Tạo Mẫu 3D Business Card Bằng CSS

Chào các bạn ! Hôm nay mình sẽ chia sẻ cho các bạn một mẫu Bussiness Card cực kỳ ấn tượng và đẹp mắt, đặc biệt là các bạn không cần phải dùng các phần mềm thiết kế hay các công cụ tạo ảnh động nào, tất cả chỉ bằng CSS.

Xem Demo | Download

HTML 

Đầu tiên , chúng ta cần phải có các phân tử html như sau :

<div class="wrap">
  <div class="card">
    <div class="front"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>

    <div class="left">
      <div class="name">Thu Thuat Web</div>
      <div class="prof">Web Developer</div>
    </div>
    <div class="right">
      <div class="logo"><i class="fa fa-cubes"></i>
        Web Developer
      </div>
      <div class="bottomInfo">
        <ul>
          <li><i class="fa fa-home"></i>thuthuatweb.net</li>
          <li><i class="fa fa-phone"></i>01582 123456</li>
          <li><i class="fa fa-envelope-o"></i>weptipsnet@gmail.com</li>
          <li><i class="fa fa-twitter"></i>@thuthuatweb</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

Và đây là toạn bộ đoạn css giúp các bạn tạo một tấm card ấn tượng :

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);

body {
  background: #222;
  font-family:'Lato', sans-serif;
}
.wrap {
  perspective: 1200px;
}
.card {
  position: absolute;
  top: 50px; left: 0; right: 0;
  margin: auto;
  awidth: 20px;
  transform-style: preserve-3d;
  transition: all 2s;
  transform: rotateY(60deg) rotateX(20deg);
}
.card:hover {
  transform: rotateY(-90deg);
}
.card div {
  position: absolute;
}
.back {
  transform: translateZ(-100px);
  background: #666;
  awidth: 20px;
  height: 300px;
  background: linear-gradient(to right, rgba(254,255,255,1) 40%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 60%);
}
.front {
  transform: translateZ(100px);
  background: #666;
  awidth: 20px;
  height: 300px;
  background: linear-gradient(to right, rgba(254,255,255,1) 40%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 60%);
}
.top {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: top center;
  awidth: 20px;
  height: 200px;
  background: linear-gradient(to right, rgba(254,255,255,1) 40%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 60%);

}
.bottom {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
  awidth: 20px;
  height: 200px;
  top: 100px;
  background: linear-gradient(to right, rgba(254,255,255,1) 40%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 60%);
}

.right {
  left: -180px;
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
  awidth: 200px;
  height: 300px;
  background: #fff;
}
.logo {
  awidth: 80%;
  height: 100px;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
}
.logo i {
  display: block;
  font-size: 40px;
}
.bottomInfo {
  awidth: 90%;
  height: 100px;
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  margin: auto;
}
.bottomInfo ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bottomInfo ul li {
  margin: 4px;
  font-size: 11px;
  text-align: center;
}
.bottomInfo ul li i {
  awidth: 20px;
  text-align: center;
  font-size: 12px;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
  background: #333;
  awidth: 200px;
  height: 300px;
  background: #fff;
  outline: 4px solid;
  outline-offset: -10px;
}
.name {
  awidth: 80%;
  height: 30px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  font-weight: 100;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  top: 110px; left: 0; right: 0;
  margin: auto;
}
.prof {
  awidth: 80%;
  height: 30px;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 10px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  top: 140px; left: 0; right: 0;
  margin: auto;
}

Rất đơn giản phải không các bạn, có thể các bạn sẽ không áp dụng gì nhiêu vào trong các dự án web hay chính trang web của các bạn, nhưng đoạn css mà mình chia sẻ trong bài viết này sẽ thật sự hữu ích cho những ai muốn tìm hiểu sâu hơn về CSS3 cũng như có thể tùy biến cho những ứng dụng khác mà các bạn muốn có.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster