如果要使得你的3D轉(zhuǎn)換效果更加容易觀察，可以給要變換的父元素加上perspective屬性（必須加在父元素上，和transform-style:preserve-3D一樣），使得效果更加明顯
18-9-7-1.PNG
此時(shí)對(duì)應(yīng)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
}
img{
}
</style>
</head>
<body>
<div>
<img src="images/xx.jpg">
</div>
</body>
</html>
18-9-7-2.PNG
此時(shí)對(duì)應(yīng)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
}
img{
transform: rotateX(30deg);
}
</style>
</head>
<body>
<div>
<img src="images/xx.jpg">
</div>
</body>
</html>
18-9-7-3.PNG
此時(shí)對(duì)應(yīng)代碼為
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
perspective: 600px;
}
img{
transform: rotateX(30deg);
}
</style>
</head>
<body>
<div>
<img src="images/xx.jpg">
</div>
</body>
</html>
我寫了一些3D轉(zhuǎn)換的小例子，放在了我的github上 https://github.com/lionlsc/rotate3D
