如何使用 CSS 旋转 div 以实现这种类型的 3D 效果？ [复制]答案

【问题标题】：How to rotate a div using CSS to achieve such type of 3 D effect? [duplicate]如何使用 CSS 旋转 div 以实现这种类型的 3D 效果？ [复制]
【发布时间】：2020-04-13 16:40:36
【问题描述】：

是否可以旋转 div 以使用纯 CSS 实现这种 3d 效果？

【问题讨论】：

标签： css

【解决方案1】：

您可以使用perspective 非常接近

我改编了链接文章中的一个演示：

.background {
  width: 200px;
  height: 200px;
  margin: 80px;
  perspective: 400px;
  perspective-origin: 50% 50%;
}

.box {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
}

.box-front, .box-top {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.box-top { 
  transform: rotateX(90deg) translateZ(100px);
 }
 
.box-front { 
  transform: rotateY(0deg) translateZ(100px); 
 }
 
.box-top { 
  background: rgba(255, 50, 50, 0.7);
}

.box-front { 
  background: rgba(0, 255, 125, 0.7); 
}

<div class="background">
  <div class="box">
    <div class="box-front"></div>
    <div class="box-top"></div>
  </div>
</div>

【讨论】：

哦，是的！我认为它非常接近我想要实现的目标。感谢您的演示。我会调查的。

【解决方案2】：

看看这个sn-p。使用skewY(xDeg)我可以达到这个效果

https://www.w3schools.com/css/css3_2dtransforms.asp

.container {

  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  width: 25vw;
  height: 25vh;

  margin: 25% 25%;

  background: #4caf5c;
  z-index: 0;
  transform: skewY(30deg);
  transform-origin: top right;

  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

  overflow: hidden;
}

<!DOCTYPE html>

<html lang="en" dir="ltr">
<link rel="stylesheet" href="master.css">

<div class="container">


            <div class="logo">
                <a href="index.html">IMG HERE</a>
            </div>

        <div class="navItems">

                  <div class="mobileMenu2">
                      <span></span>
                      <span></span>
                      <span></span>
                  </div>
                    <ul >
                        <li class="has-menu-items">ABOUT US
                            <ul class="sub-menu">
                                <li>HISTORY</li>
                                <li>ORGANIZATION</li>
                            </ul>
                        </li>
                        <li class="has-menu-items">MEDIA
                            <ul class="sub-menu">
                                <li>PHOTO GALLERY</li>
                                <li>VIDEOS</li>
                            </ul>
                        </li>
                        <li class="has-menu-items">DOWNLOADS</li>
                    </ul>
      </div>


            <div class="socialIcon">
                <a class="fb" href="#" title="facebook">FB LOGO HERE</a>
                <a class="ig" href="https://www.instagram.com/ title="instagram">IG LOGO HERE</a>
            </div>
    </div>

</html>

【讨论】：