transform，形变，包括：位移、旋转、缩放、倾斜。
1.位移translate ------在当前基础上进行移动
transform:translateX(100px) 围绕x轴水平向右移动
2.旋转rotate ------通常围绕z轴旋转,旋转角度单位是deg
transform:rotate(45deg);
3.缩放scale------默认值是1，不放大也不缩小；
transform:scale(0.5);
4.倾斜-------在X轴或Y轴倾斜
形变的参考点：主要针对旋转所用
transform-origin: left top 左上角的原点
transform: rotate(45deg)
transform的应用:3D效果
<style>
*{
margin: 0;
padding: 0;
}
body{
/*给需要做3D动画的元素的父元素开启3D效果*/
transform-style: preserve-3d;
/*设置距离值:舞台深度*/
perspective: 2000px;
/*设置舞台中心点/基准点的位置*/
perspective-origin: 100px 0;
/*无论是开启3D模式,还是设置舞台深度,还是设置基准点,都是设置给父元素的,
只有设置元素背面你不可见,是设置给元素自身的*/
}
.box{
width: 200px;
height: 200px;
border: 1px solid red;
text-align: center;
line-height: 200px;
font-size: 2em;
transition: all .3s;
}
.box:hover{
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
网友评论