图片3D效果倾斜

来源:互联网 发布:怎么做淘宝图片 编辑:程序博客网 时间:2024/03/29 07:53
<!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);   
 }

-->

0 0
原创粉丝点击