clip path 3d transform

HTML

<div class="grad">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <clipPath id="clipping">
        <circle cx="284" cy="213" r="213" />
    </clipPath>
</svg>

CSS

#clipping {
    -webkit-transform: perspective( 60px ) rotateX( 80deg ) rotateY(5deg);
    text-shadow: 1px 1px 1px #000;
    width: 100%;
    height: 300px;
}
.grad {
    width: 500px; height: 500px;
    background: blue;
    -webkit-clip-path: url(#clipping);
    transform:translateZ(2px);
}