<!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>
<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);
}
-->
