Rumah > hujung hadapan web > html tutorial > CSS3---2D变换

CSS3---2D变换

WBOY
Lepaskan: 2016-08-18 08:57:57
asal
1281 orang telah melayarinya

transform

  transition-origin:设置对象中变换所参照的原点

  none:无变换

  translate([,]):指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认是为0.

    translateX():指定对象X轴平移

    translateY():指定对象Y轴平移

  rotate():指定对象的2D rotation(2D 旋转),需要现有transtion-origin属性的定义

  scale([,]):指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数。

    scaleX():指定对象X轴的(水平方向)缩放

    scaleY():指定对象Y轴的(竖直方向)缩放

  skew():指定对象的skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认是为0.

    skewX():指定对象Y轴的(水平方向)扭曲

    skewY():指定对象Y轴的(水平方向)扭曲

 

过渡:

transtion:[transtion-property]||[transtion-duration]||[transtion-timing-function]||[transtion-delay]

  transtion-property:检索或设置对象中的参与过渡的属性 default

  transtion-duration:检索或设置对象过渡的持续时间

  transtion-timing-function:检索或设置对象过渡的动画类型

  transtion-delay:检索或设置对象延迟过渡的时间

 

动画:

animation:[animation-name]||[animation-duration]||[animation-timing-function]||[animation-delay]||[animation-iteration-count]||[animation-direction]

  animation-name:检索或设置对象所应用的动画名称

  animation-duration:检索或设置对象动画的持续时间

  animation-timing-function:检索或设置对象动画的过渡类型

  animation-delay:检索或设置对象动画的延迟时间

  animation-iteration-count:检索或设置对象动画的循环次数

  animation-direction:检索或设置对象动画在循环中是否反向运动

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan