CSS - transform 动画属性 -

transform属性---3D位置移动

translate3d(x,y,z)
定义:基于原来的位置,沿X轴平移,长度为x,沿Y轴平移,长度为y,沿Z轴平移,长度为z
语法:

transform:translate3d(x,y,z);    

transform属性---3D缩放

scale3d(x,y,z)
定义:基于原来的位置进行伸缩变换,其中x代表沿X轴的伸缩倍数,y代表沿Y轴的伸缩倍数,z代表沿Z轴的伸缩倍数
语法:

transform:scale3d(x,y,z);
transform:scale(1.1);

transform属性---2D旋转

transform: rotate(45deg);

transform属性---2D移动(小米悬停)

transform:translate(x,y);
transform:translate(0,-10px);

小案例:小米悬停

.wapper li{
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;

}
.wapper li:hover {
transform:translate(0,-10px);
-webkit-transform:translate(0,-10px);
-moz-transform:translate(0,-10px);
-o-transform:translate(0,-10px);
-ms-transform:translate(0,-10px);
-webkit-box-shadow:0px 5px 15px #e5e5e5;
-moz-box-shadow:0px 5px 15px #e5e5e5;
box-shadow:0px 5px 15px #e5e5e5;
}    

transform属性---3D缩放转换
translate3d(x,y,z)


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容