如何创建：3D 翻转盒子

学习如何使用 CSS 创建一个翻转盒子。

如何创建一个翻转盒子

第一步 - 添加 HTML：

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>ਪਿੱਛੇ ਦੀ ਪਾਰਟ</h2>
    </div>
  </div>
</div>

ਦੂਜਾ ਪਗਲਾ - CSS ਜੋੜੋ:

/* ਫਲਿਪ ਬਾਕਸ ਕੰਟੇਨਰ - ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਅਕਾਰ ਨੂੰ ਸੈਟ ਕਰੋ।ਅਸੀਂ border ਲੈਬਲ ਨੂੰ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਜੋੜੇ ਹਨ, ਜਦੋਂ ਮਾਉਸ ਹਵਾਲੇ ਹੋਵੇ ਤਾਂ ਫਲਿਪ ਖਿੱਚ ਹੀ ਕੰਟੇਨਰ ਤੋਂ ਬਾਹਰ ਆਉਂਦਾ ਹੈ (ਜੇਕਰ ਤੁਸੀਂ 3D ਪ੍ਰਭਾਵ ਨੂੰ ਨਹੀਂ ਚਾਹੁੰਦੇ ਤਾਂ perspective ਨੂੰ ਹਟਾਓ) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* ਜੇਕਰ 3D ਪ੍ਰਭਾਵ ਨੂੰ ਨਹੀਂ ਚਾਹੁੰਦੇ ਤਾਂ ਇਸ ਲਾਈਨ ਨੂੰ ਹਟਾਓ */
}
/* ਇਹ ਕੰਟੇਨਰ ਫਰਨਟ ਅਤੇ ਪਿੱਛੇ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* ਮਾਉਸ ਹਵਾਲੇ ਨਾਲ ਫਲਿਪ ਬਾਕਸ ਕੰਟੇਨਰ ਉੱਤੇ ਜਦੋਂ ਮਾਉਸ ਹਵਾਲੇ ਹੋਵੇ ਤਾਂ ਪਲੰਕਟੀ ਵਲਾਂ ਫਲਿਪ ਕਰੋ */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* ਫਰਨਟ ਅਤੇ ਪਿੱਛੇ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕਰੋ */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* ਫਰਨਟ ਦੀ ਸਟਾਈਲ ਸੈਟ ਕਰੋ */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* ਪਿੱਛੇ ਦੀ ਸਟਾਈਲ ਸੈਟ ਕਰੋ */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉੱਚੇ ਵਲਾਂ ਸਿਰਫ ਪਲੰਕਟੀ ਵਲਾਂ

ਉੱਚੇ ਵਲਾਂ ਸਿਰਫ ਪਲੰਕਟੀ ਵਲਾਂ ਕਰਨ ਲਈ ਇਸਤੇਮਾਲ ਕਰੋ rotateX ਮੱਧਮ ਹੋਣ ਦੀ ਥਾਂ rotateY：

ਉਦਾਹਰਨ

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}
.flip-box-back {
  transform: rotateX(180deg);
}

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਧਿਆਨ:ਇਹ ਉਦਾਹਰਨ ਪੈਡ ਕੰਪਿਊਟਰ ਅਤੇ/ਜਾਂ ਮੋਬਾਈਲ ਵਿੱਚ ਸਹੀ ਤਰ੍ਹਾਂ ਕੰਮ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹਨ。

相关页面

教程：CSS 2D 变换

教程：CSS 3D 变换