CSS3 3d objects

by Avdhut Sonpethkar

HTML

<div class="test_transform">
    &nbsp;
</div>

CSS

.test_transform
{
    height: 200px;
    width: 200px;
    background: #FFadc0;
    opacity: 0.9;
   position: relative;
    margin: 100px;
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    
}

.test_transform:after {
	content:"";
	position:absolute;
	z-index:-2;
	bottom:-30px;
	left:10%;
	height:80px;
	border-right:80px solid #ffed26;
    	border-left:80px solid #ffed26;
	background:#ffed26; /* need this for webkit - bug in handling of border-radius */
	/* css3 */
    	-webkit-border-bottom-left-radius:100px 40px;
	-moz-border-radius-bottomleft:100px ;
	border-bottom-left-radius:80px 40px;
    
	-webkit-border-bottom-right-radius:80px 40px;
	-moz-border-radius-bottomright:100px ;
	border-bottom-right-radius:80px 40px;
	/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
	-webkit-transform:translate(0, -2px);
	-moz-transform:translate(0, -2px);
	-ms-transform:translate(0, -2px);
	-o-transform:translate(0, -2px);
	transform:translate(0, -2px);
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}