Mintik adlı üyeden alıntı

.cerceve {
width: 600px;
height: 350px;
background-color:#999999;
-webkit-transform-origin: 1% 50%;
-moz-transform-origin: 1% 50%;
-ms-transform-origin: 1% 50%;
-o-transform-origin: 1% 50%;
transform-origin: 1% 50%;
-webkit-transform: perspective(500px) rotateY(10deg);
-moz-transform: perspective(500px) rotateY(10deg);
-ms-transform: perspective(500px) rotateY(10deg);
-o-transform: perspective(500px) rotateY(10deg);
transform: perspective(500px) rotateY(10deg);
-webkit-transition:0.7s;
-moz-transition:0.7s;
-ms-transition:0.7s;
-o-transition:0.7s;
transition:0.7s;
}

rotateY değeri ile biraz oyna ben daha önceden hazırladığım bir örnek için kullanmıştım bu kodu. Tam istediğin pozisyonda değil ama rotateY değeri ileistediğin görüntüyü elde edebilirsin. Transitions değerleri bu çalışma için işine yaramaz ama belki hover için kullanırsın diye eksik etmedim onlarıda.

Ekleme
-------
Eğer alt kısmı işaret eden ok işaretinin (tooltip ucu) nasıl yapıldığını merak ediyorsan bunun içinde şu kodları kullanabilirsin.
ul:before {
content: '';
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid white;
position: absolute;
top: 75px;
left: -20px;
}

Senin örnekten biraz daha küçük boyu. Ayrıca alt bölüme doğru değilde çerçevenin sol tarafında kalıyor.
Border-top : 15px border-bottom: 15px border-right:15px olarak belirlenmiş. Yani sağ, alt ve üst bölüm için border görünüyor. Border-top yerine border-left olarak ayarlarsan senin verdiğin örnekteki gibi alt kısmı göstermesini sağlayabilirsin. Ayrıca kullanacağın çerçevenin genişliğine ve yüksekliğine göre de top :75px left:-20px değerleri ile biraz oynaman gerekiyor.

Sadece bu css kodları kullanark verdiğin resmin aynısını hazırlayabilirsin. Ha bir de box-shadow vermen de gerekiyor biraz. O zaman tıpkısının aynısını yaparsın.