index.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS3变形效果[下]</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="a"> <img src="img.png"> </div> 111 </body> </html>
?
style.css
@charset "utf-8";
body {
margin: 100px;
}
#a {
perspective: 500px;
/*perspective-origin: top right;*/
transform-style: preserve-3d;
}
img {
/*transform: translate3d(100px, 100px, 300px);*/
/*transform: translateZ(300px);*/
/*transform: scale3d(1.5,1.5,2.5) rotateX(45deg);*/
/*transform: scaleZ(1.5) rotateX(45deg);*/
/*transform: rotate3d(1,1,1,120deg);*/
/*transform: rotateX(120deg);*/
/*transform: rotateY(45deg);*/
/*transform: perspective(500px) rotateY(45deg);*/
transform: rotateY(45deg);
}
?
效果图：
?
?
原文：http://onestopweb.iteye.com/blog/2232032