3D变换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D变换</title>
<style>
#stage{
width: 300px;
margin: 100px auto;
perspective:100px;
}
.box{
width: 100px;
height:100px;
float:left;
transition:linear 1s;
transform-style: preserve-3d;
}
img{
width:100px;
height:75px;
}
.x:hover
{
transform:rotateX(60deg);
}
.y:hover
{
transform:rotateY(60deg);
}
.z:hover
{
transform:rotateZ(60deg);
}
</style>
</head>
<body>
<div id="stage">
<div class="box x">
<img src="image/03small.jpg" />
</div>
<div class="box y">
<img src="image/03small.jpg" />
</div>
<div class="box z">
<img src="image/03small.jpg" />
</div>
</div>
</body>
</html>
旋转 transform属性 rotateX( ) rotateY( ) rotateZ( ) 角度deg
透视 perspective属性
1158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
