美文网首页
css 形变

css 形变

作者: 风之旅途 | 来源:发表于2017-06-23 09:44 被阅读0次

平移:
transform:translate(x,y);
x,y可以是像素值,
设置为百分比的时候以自身元素的宽高为基准
*平移的时候不影响其他元素的位置,占的空间位置还是原来的。
transform: translateY(100px);-----可以在 translate后加大写Y,以表示Y轴的方向,X轴的一样。

旋转:
transform:rotate(deg);
deg是角度单位,正数的时候顺时针旋转,负数就逆时针旋转。
旋转中心是图形的中点,可以通过transform-origin属性改变。

缩放:
vtransform:scale(x,y);
x,y是该方向的缩放比例,1为正常,当为负数的时候,会镜像。
缩放中心是图形的中点,可以通过transform-origin属性改变。
可以只控制一个方向的缩放:scaleY(5)
scale(4)-----------x,y方向都是4倍的放大。

斜切:
transform: skew(45deg);
把图形斜着放。

相关文章

  • css 形变

    平移:transform:translate(x,y);x,y可以是像素值,设置为百分比的时候以自身元素的宽高为基...

  • CSS3-形变、动画

    一. CSS3 形变 1. 2D形变 transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转...

  • 移动端CSS-形变

    形变特性 在CSS中对于形变的转换主要分为2D和3D两种形式,其中包含的形变特性有: translate:位置移动...

  • 移动端CSS-形变

    形变特性 在CSS中对于形变的转换主要分为2D和3D两种形式,其中包含的形变特性有: translate:位置移动...

  • CSS3动画

    css3动画包括过渡,形变,动画 过渡transition: 指定过渡样式:transition-property...

  • 前端还在切图?学完这些css,再也不用切图了!

    标题开个玩笑,实际上CSS3有许多亮眼的特性,比如阴影shadow、动画animation、形变transform...

  • CSS3属性——transform形变

    transform,形变,包括:位移、旋转、缩放、倾斜。 1.位移translate ------在当前基础上进行...

  • css3-形变、过渡、动画

    一、2D形变 平移 transform:translate(x,y) 相对当前位置,向左移动x像素,像下移动y像素...

  • CSS中的过渡/形变/动画

    1.过渡(transition) 是一个综合属性 transition:要过渡的属性 时间 运动的形式 何时开始 ...

  • Swift-transform、transform3D属性

    transform 基于View的形变 transform3D 基于View的形变 基于layer的形变

网友评论

      本文标题:css 形变

      本文链接:https://www.haomeiwen.com/subject/uinqcxtx.html