3D 與陰影的文字作用

HTML：

<div id="title">
  <h1 data-content="HOVER">HOVER</h1>
</div>

CSS：

*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  perspective-origin:50% 50%;
  perspective:300px;
}
h1{
  text-align:center;
  font-size:12vmin;
  font-family: 'Open Sans', sans-serif;
  color:rgba(0,0,0,0.8);
  line-height:1em;
  transform:rotateY(50deg);
  perspective:150px;
  perspective-origin:0% 50%;
}
h1:after{
  content:attr(data-content);
  position:absolute;
  left:0;top:0;
  transform-origin:50% 100%;
  transform:rotateX(-90deg);
  color:#0099CC;
}
#title:before{
  content:'';
  position:absolute;
  top:-150%; left:-25%;
  width:180%; height:328%;
  background:rgba(255,255,255,0.7);  
  transform-origin: 0 100%;
  transform: translatez(-200px) rotate(40deg) skewX(35deg);
  border-radius:0 0 100% 0;
}

檢視具有其他懸停效果的示例

在此示例中，文字被轉換為使其看起來像是遠離使用者進入螢幕。

相應地轉換陰影，使其跟隨文字。由於它是使用偽元素和 data 屬性建立的，因此它繼承了它的父變換（H1 標記）。

白色光由 #title 元素上的偽元素構成。它是傾斜的，並使用 border-radius 作為圓角。