css3的transform ，2D变换

最新推荐文章于 2025-05-08 11:30:00 发布

转载最新推荐文章于 2025-05-08 11:30:00 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/baixuemin/p/6495051.html

本文详细介绍了CSS中的transform属性及其各种变换方式，包括平移、旋转、缩放和扭曲等，并解释了transform-origin属性如何设定变换的原点。

transform
transform的中文翻译就是变换，改变，改观，转换的意思
在css中的主要作用就是对一个div或元素进行样式的改变。
他的属性（变换方式）有：平移，旋转，缩放，扭曲
translate(10px,20px;)   指定对象的2D平移，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translateX:10px;   指定对象X轴（水平方向）的平移
translateY:20px;   指定对象Y轴（垂直方向）的平移
rotate(30deg);    指定对象的2D旋转，需要先有transform-origin属性的定义
scale(1.2,1.2);      指定对象的2D缩放，第一个参数对应X轴，第二个参数对应Y轴，如果第二个参数没有提供，则默认取第一个参数的值。
scaleX(1.2);    指定对象X轴的（水平方向）缩放
scaleY(1.2);     指定对象Y轴的（垂直方向）缩放
skew(-5deg,-5deg);   指定对象扭曲，第一个参数对应X轴，第二个参数对应Y轴，如果第二个参数没有提供，则默认值0
skewX(-5deg);    指定对象X轴的（水平方向）扭曲
skewY(-5deg);    指定对象Y轴的（垂直方向）扭曲

transform-origin
origin的中文翻译是起源，根源的意思，顾名思义，transform-origin是设置对象以某个原点进行转换。
transform-origin:(50%,50%);
这个属性有两个参数，第一个是横坐标值，第二个是纵坐标值，默认都是50%,如果只有一个值，用于横坐标，纵坐标是默认值50%
left    指定原点的横坐标为center
center    指定原点的横坐标为center
right     指定原点的横坐标为right
top     指定原点的纵坐标为top
center     指定原点的纵坐标为center
bottom   指定原点的纵坐标为bottom

转载于:https://www.cnblogs.com/baixuemin/p/6495051.html