学习笔记
3D变换——transform-style:preserve-3d;
//父容器
transform-style:preserve-3d;
transform-rotateX(x deg); //X轴方向旋转
transform-rotateY(y deg); //Y轴方向旋转
transform-rotateZ(z deg); //Z轴方向旋转
//若不设置透视,则还是扁平的2D效果;
//放在舞台中
perspective:100px; //透视距离,越近越小效果越好;
例子:
<html>
<head>
<style>
.box{
width:100px;
height:100px;
float:left;
transition:linear 1s; //过渡方式 时间;
transform-style:perserve-3d; //过渡类型;
}
img{
width:100px;
height:75px;
}
.x:hover{
transform:rotateX(60deg);
}
.y:hover{
transform:rotateY(60deg);
}
.z:hover{
transform:rotateZ(60deg);
}
#stage{
width:200px;
margin:100px auto;
perspective:100px;
}
</style>
</head>
<body>
<div id="stage">
<div class="box x"> //引用box、x两个样式;
<img src="xxx.jpg"/> //指定的图片路径;
</div>
<div class="box y">
<img src="xxx.jpg"/>
</div>
<div class="box z">
<img src="xxx.jpg"/>
</div>
</div>
</body>
</html>