Chrome 3D Bug

by simurai

HTML

<p>Rotate</p>

CSS

html {
    padding: 100px;            
}

body {
    width: 600px;
    margin: 0 auto;
    
    /* 
    
    It seems that when the perspective is lower than half the width, 
    the element disappears when rotated too much. 
    So perspective:300px and higher work fine, but not below 300px.
    
    */ 
    -webkit-perspective: 250px;
}

p {
    font: 50px sans-serif;
    text-align: center;
    background: pink;
    -webkit-animation: rotate 3s linear infinite alternate;
}

@-webkit-keyframes rotate {
    0% { -webkit-transform: rotateY(90deg); }
    100% { -webkit-transform: rotateY(-90deg); }
}