transform的使用

最新推荐文章于 2025-05-27 16:38:22 发布

X201805

最新推荐文章于 2025-05-27 16:38:22 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签：动画 3d

本文链接：https://blog.csdn.net/X201805/article/details/128354999

1.介绍

tranform通常用于制作动画效果，比如页面中的平移，旋转。还能制作3D效果的旋转。

2.使用

①平移：

平移效果通常用translate（）去实现，但是translate如果只给出一个值,表示x轴方向移动距离单独设置某个方向的移动距离 translateX（）和 translateY （），平移效果在其后输入，可以是像素与百分比。

/* transform: translate(100px,50px); */

       /* 百分比：盒子自身尺寸的百分比 */
       /* transform: translate(100%,50%); */
       /* transform: translate(-100%,-50%); */

        /* 只给出一个值  x轴移动距离 */
       /* transform: translate(100px); */

       transform: translateY(100px);

②旋转：

transform:rotate(角度) 角度单位是deg，取值正负均可：取值为正,顺时针旋转，取值为负,逆时针旋转，旋转时默认旋转中心是盒子中心，但是可以用transform-origin改变原点位置，使用方法为：transform-origin:原点水平位置原点垂直位置; 改变转换原点

/* 改变原点 */
      /* transform-origin: right bottom; */
      transform-origin:0px 0px;
      /* 顺 */
      transform: rotate(360deg);
      /* 逆 */
      /* transform: rotate(-360deg);*/

使用时二者可以同时用，如：transform: translate(600px) rotate(360deg);
③缩放：

transform: scale(x轴缩放倍数,y轴缩放倍数);一般情况下,只为scale设置一个值,表示x轴和ye轴等比例缩放，transform:scale(缩放倍数)，scale值大于1 表示放大 scale值小于1 表示缩小

/* transform: scale(x轴缩放倍数,y轴缩放倍数); */
      /* transform: scale(0.5,0.5); */
      transform: scale(1.5);

④空间位移：

空间位移就是在平面变换的基础上添加了一个Z轴，transform:translateX(值) transform:translateY(值) transform:translateZ(值)，像素单位值、百分比、正负均可