HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 120px; height: 120px; text-align: center; background: #66cc66; border: 1px solid #339933; animation: myAnimation 3s infinite; -webkit-animation: myAnimation 3s infinite; -moz-animation: myAnimation 3s infinite; animation-timing-function: linear; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; } #point{ backface-visibility: visible; -webkit-backface-visibility: visible; } #point1{ backface-visibility: hidden; -webkit-backface-visibility: hidden; } @keyframes myAnimation { from {transform: rotateY(0deg);} to {transform: rotateY(360deg);} } @-moz-keyframes myAnimation /* Firefox */ { from {-moz-transform: rotateY(0deg);} to {-moz-transform: rotateY(360deg);} } @-webkit-keyframes myAnimation /* Opera, Safari, Chrome */ { from {-webkit-transform: rotateY(0deg);} to {-webkit-transform: rotateY(360deg);} } @-ms-keyframes myAnimation /* IE */ { from {-ms-transform: rotateY(0deg);} to {-ms-transform: rotateY(360deg);} } </style> </head> <body> <h1>CSS backface-visibility Property</h1> <h2>backface-visibility: visible;</h2> <div id="point">Hello World!</div> <h2>backface-visibility: hidden;</h2> <div id="point1">Hello World!</div> </body> </html>
OUTPUT
×

Save as Private