css3中的3D转换(随谈)
2018-09-07 本文已影响0人
lionlsc
如果要使得你的3D转换效果更加容易观察，可以给要变换的父元素加上perspective属性（必须加在父元素上，和transform-style:preserve-3D一样），使得效果更加明显
18-9-7-1.PNG
此时对应代码
<!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
此时对应代码
<!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
此时对应代码为
<!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转换的小例子，放在了我的github上 https://github.com/lionlsc/rotate3D
