图片3D效果倾斜

最新推荐文章于 2024-07-03 12:41:46 发布

leiwuxing

最新推荐文章于 2024-07-03 12:41:46 发布

阅读量654

点赞数

本文链接：https://blog.csdn.net/leiwuxing/article/details/48950479

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 3D骨牌图片特效带文字描述在线演示</title>
<style>
div{
perspective: 1000px;
width: 33%;
margin: 0 auto;

}
img {
width: 300px;
transform-origin: center bottom;
transform-style: preserve-3d;
transition: 1s transform;
}
div:hover img {
transform: rotateX(75deg);
}
</style>
</head>
<body>
<div>
<img src="http://7vznb3.com2.z0.glb.qiniucdn.com/1442979922396KR4ADL74GB0EW1EKRT79RQU83YKBZ17B.jpg?imageMogr2/auto-orient/thumbnail/600x600"/>
</div>
</div>
</body>
</html>

<!-

div{
perspective: 1000px;
width: 33%;
margin: 0 auto;

}
img {
width: 300px;
transform-origin: center bottom;
transform-style: preserve-3d;
transform: rotateX(33deg);
}

-->