<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.out{
width: 200px;
height: 300px;
-webkit-perspective:800px;
margin: 0 auto;
}
.box{
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
}
img{
transition: -webkit-transform 2s ease 1s,width 1s ease 2s;
-webkit-box-reflect:below 5px -webkit-gradient(linear,50% 0,50% 100%,
color-stop(0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,0.1)),
color-stop(0.8,rgba(0,0,0,0.4)),color-stop(1,rgba(0,0,0,0.8))
);
/*above：
指定倒影在对象的上边
below：
指定倒影在对象的下边
left：
指定倒影在对象的左边
right：
指定倒影在对象的右边
5px 定义阴影和图片的距离
*/
}
img:hover{
-webkit-transform:rotate3d(1,1,1,45deg);
width: 300px;
}
</style>
</head>
<body>
<div class="out">
<div class="box">
<img src="1.jpg" width="200px" height="200px">
</div>
</div>
</body>
</html>
时间： 2024-10-26 07:57:40