精华内容
下载资源
问答
  • CSS3 transform有哪些常用属性transform属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。 下面我们来分解各个属性的用法: ...

    CSS3 transform是什么?

    transform的含义是:改变,使…变形;转换

    CSS3 transform都有哪些常用属性?

    transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。

    下面我们来分解各个属性的用法:

    transform:rotate():

    含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。

    .demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

    transform:skew():

    含义:倾斜;

    .demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

    transform:scale():

    含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。

    .demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

    transform:translate():

    含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。

    .demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

    transform综合:

    transform的常用属性就是这些了,下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例:

    .demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
    .demo_transform5:hover{-webkit-transform:rotate(360degskew(-20degscale(3.0)translate(100px,0);-moz-transform:rotate(360degskew(-20deg)scale(3.0)translate(100px,0)}
     
    转自:http://www.daqianduan.com/2959.html

    转载于:https://www.cnblogs.com/Gwen-hui/p/4371932.html

    展开全文
  • css动画属性有哪些

    2020-02-29 15:42:20
    前言 ...css动画结合属性有: transform(动画变形属性) transition(动画过渡属性) animation(帧动画属性) 一:transform动画变形属性 在平面空间也就是2d空间中的transform动画变形属性: 1)2d的变换...

    前言
    最近在逆战班学习了css动画属性,开始感觉还是不错滴,但过了几天有点忘记了,就再次翻了翻笔记整理了一下,希望能加深印象。有错的地方希望能够指点指点。
    css动画结合属性有: transform(动画变形属性)
    transition(动画过渡属性) animation(帧动画属性)
    一:transform动画变形属性
    在平面空间也就是2d空间中的transform动画变形属性:
    1)2d的变换:
    在平面进行位置的移动 transform:translate()
    在平面进行旋转 transform:rotate()
    在平面进行缩放 transform:scale()
    在平面进行倾斜 transform:skew()
    2)2d位移
    transform:translate(参数1,参数2)
    参数1:水平方向移动的距离
    参数2:垂直方向移动的距离
    参数的设置:如果是正值的情况下:往右往下 负值:往左往上
    注意:参数表示坐标值,第二个参数可选,若省略默认为0px
    单独设置X/Y的位移:
    transform:translateX(水平方向移动的距离);
    transform:translateY(垂直方向移动的距离);
    3)2d缩放:
    transform:scale(参数1,参数2); (0 -
    0.999999 缩小 大于1 放大)
    参数1:水平方向缩放的比例
    参数2:垂直方向缩放的比例
    :如果两个参数相同的情况下 直接写一个。
    单独设置X Y
    transform:scaleX(水平方向缩放的比例);
    transform:scaleY(垂直方向缩放的比例);
    4)2d旋转:
    transform:rotate(旋转的角度); 旋转的是一个度数 deg
    :默认情况下绕着元素中心点进行转动
    5)2d倾斜:
    transform:skew(参数1,参数2); deg(度数单位)
    参数1:水平方向的倾斜角度
    参数2:垂直方向的倾斜角度
    注意:参数表示倾斜角度,第二个参数可选,若省略默认为不倾斜
    单独设置围绕某个轴(X Y)
    transform:skewX(度数)
    transform:skewY(度数)
    6)2d变形原点:(默认是以元素的中心点为基准点进行变形的)
    transform-origin:水平方向 垂直方向
    可以如下三种方式设置变形原点位置:left center(用表示位置的单词设置)或10px 10px(直接数值设置)或50%(百分比设置)
    : 如果transform:有两个功能函数:先写位移 再写旋转
    在三维空间也就是3d空间中的transform动画变形属性
    在这里插入图片描述
    3D功能函数:
    1)3D的位移:
    transform:translate3D(x,y,z);
    translateX(移动的距离) 沿着x轴移动
    translateY(移动的距离) 沿着y轴移动
    translateZ(移动的距离) 沿着z轴移动
    :沿着z轴移动的距离不能是百分比,x轴和y轴可以为百分比。
    2)3D的旋转:
    transform:rotate(旋转角度);
    rotateX(旋转角度) 沿着x轴方向旋转
    rotateY(旋转角度) 沿着y轴方向移动
    rotateZ(旋转角度) 沿着z轴方向旋转(默认情况效果类似)
    rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]

    • x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
    • y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
    • z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
      - a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
      :直接写rotate(旋转角度)与沿着z轴方向旋转、平面旋转效果一样
      3)3D缩放:
      transform:scale3d(x,y,z); x,y,z为一个数值(0 -0.999999缩小 大于1 放大)
      scaleX(缩放大小) x轴缩放
      scaleY(缩放大小) y轴缩放
      scaleZ(缩放大小) z轴缩放
      4) css3-景深!(3D空间!)
      观察物体的一视角距离.产生近大远小的效果。
      语法:
      perspective: 1200px;(一般都是在父元素中使用)
      transform:perspective(1200px) (在子元素中使用)
      注:两个都设置会发生冲突,建议只设置父元素,通常的数值在900-1200之间
      如果当你的视线距离物体足够远的时候,基本上就不会有近大远小的感觉
      设置视觉角度:
      persperctive-origin: left top(表位置单词) / 50% 50%(百分比) / 0px 0px(数值)
      让当前形成一个3D舞台,让其子元素在3D空间里面进行一个变换:
      语法
      transform-style:preserve-3d /
      flat(默认值:平面空间);
      二:transform过渡属性
      css3过渡属性:
    1. transition-property:检索或设置对象中的参与过渡的属性
    2. transition-duration:检索或设置对象过渡的持续时间
    3. transition-delay:检索或设置对象延迟过渡的时
    4. transition-timing-function:检索或设置对象中过渡的动画类型适用于所有元素以及:before和:after伪元素。
      简写方法:
      transition: 属性值1 属性值2 属性值3 属性值4
      属性值1:
      需要参与过渡属性 all ( 能支持过渡属性的都会过渡变换 默认值)
      属性值2:
      过渡的时间 s秒 ms 毫秒
      属性值3:
      延迟的时间 s秒 ms 毫秒
      属性值4:
      过渡动画的效果,默认值为ease
      取值简单说明如下:
      ease : 先快后慢
      linear :匀速
      ease-in:逐渐加快
      ease-out:逐渐变慢
      ease-in-out:先快后慢
      cubic-bezier:特殊的立方贝塞尔曲线效果
      :transition 必须通过鼠标事件触发(鼠标滑过 )
      三animation帧动画属性
      animation:不需要事件进行触发。调用关键帧即可
      制定关键帧:
      @keyframes 关键帧的名称{
      from{} 起始效果
      to{} 动画后的效果

      0%{
      //开始状态
      }
      25%{
      }
      50%{
      }

      100%{
      //结束状态
      }
      }
      animation: 复合属性
      animation-name 关键帧的名称
      animation-duration 动画的持续的时间
      animation-timing-function 动画运用的类型(匀速linear、加速度、减速度、贝塞尔曲线)
      animation-delay 动画的延迟
      animation-iteration-count 动画运动的次数(默认情况下运动1次) infinite(无限循环)
      animation-direction 运动的方向
      属性值:
      - reverse:反方向运行 ( 让关键帧从后往前执行 )
      - alternate:动画先正常运行再反方向运行,并持续交替运行
      - alternate-reverse:动画先反运行再正方向运行,并持续交替运行
      animation-play-state
      属性值: paused暂停 running运动
      常用的写法:
      animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间
    展开全文
  • 靠text-transform属性就可以解决啦! text-transform属性可以控制文本的大小写,会改变元素中的字母大小写,而不论源文档中文本的大小写。如果属性值为 capitalize,则要对某些字母大写,但是并没有明确定义如何确定...

    有时候我们需要让英文单词或拼音首个字母大写;或者需要让全文中英文单词全大写或小写。那么怎样达到这样的效果呢这样的效果?靠text-transform属性就可以解决啦!

    text-transform属性可以控制文本的大小写,会改变元素中的字母大小写,而不论源文档中文本的大小写。如果属性值为 capitalize,则要对某些字母大写,但是并没有明确定义如何确定哪些字母要大写,这取决于用户代理如何识别出各个“词”。

    text-transform属性的属性值:

    描述
    none 默认。定义带有小写字母和大写字母的标准的文本。
    capitalize 文本中的每个单词以大写字母开头。
    uppercase 定义仅有大写字母。
    lowercase 定义无大写字母,仅有小写字母。
    inherit 规定应该从父元素继承 text-transform 属性的值。

    我们用简单的代码示例来详细了解上面属性值的实现方法。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Text-transform设置大小写</title>
      <style type="text/css">
        h1 {
          text-transform: uppercase;
        }
    
        p.uppercase {
          text-transform: uppercase;
        }
    
        p.lowercase {
          text-transform: lowercase;
        }
    
        p.capitalize {
          text-transform: capitalize;
        }
      </style>
    </head>
    <body>
      <h1>Text-transform设置大小写</h1>
      <p class="uppercase">Text-transform属性设置全大写</p>
      <p class="lowercase">Text-transform属性设置全小写</p>
      <p class="capitalize">Text-transform属性设置首字母大写</p>
      </body>
    </html>
    

    效果:
    效果
    text-transform浏览器支持

    展开全文
  • CSS text-transform 属性

    2018-06-08 13:42:50
    提示和注释注释:不同的用户代理可能会用不同的方法来确定单词从哪里开始,相应地确定哪些字母要大写。例如,文本 "w3-school" 可以用两种方式显示:"W3-school" 和 "W3-School"。CSS...

    提示和注释

    注释:不同的用户代理可能会用不同的方法来确定单词从哪里开始,相应地确定哪些字母要大写。例如,文本 "w3-school" 可以用两种方式显示:"W3-school" 和 "W3-School"。CSS 并没有规定哪一种是正确的,所以这两种都是可以的。

    可能的值

    描述
    none默认。定义带有小写字母和大写字母的标准的文本。
    capitalize文本中的每个单词以大写字母开头。
    uppercase定义仅有大写字母。
    lowercase定义无大写字母,仅有小写字母。
    inherit规定应该从父元素继承 text-transform 属性的值。
    展开全文
  • CSS3动画属性有哪些

    2020-03-08 21:32:26
    2D变形属性transform 2d位移:transform:translate(参数1,参数2) 参数1:在X轴移动的距离。 参数2:在Y轴移动的距离 参数的设置:如果是正值的情况下:往右往下 负值:往左往上 .box{ width:500px;...
  • 一、变形属性transform transform:translate() 在平面进行位置的移动(单位为px) transform:translate(参数1,参数2) 参数1:在X轴移动的距离 参数2:在Y轴移动的距离 如果要单独设置X和y的位移: ...
  • CSS3 transform有哪些常用属性transform属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。 下面我们来分解各个属性的用法: ...
  • C3有哪些新增的属性

    2020-07-19 09:38:38
    css3的新增属性有哪些? 颜色rgba 渐变linear-gradient radial-gradient 背景background-size background-origin background-clip 文字阴影text-shadow 边框阴影border-shadow 圆角边框border-radius 边框图片...
  • CSS有哪些继承属性

    2021-02-07 10:34:52
    **关于文字排版的属性如: ** font word-break letter-spacing text-align text-rendering word-spacing white-space text-indent text-transform text-shadow line-height color visibility cursor
  • 一、字体系列属性 font-family:字体系列 font-weight:字体的粗细 font-size:字体的大小 font-style:字体的风格 ...text-transform: 控制文本大小写 color: 文本颜色 三、元素可见性 visibility: 控制元素显示隐
  • transform

    2015-09-07 13:18:19
    CSS3 transform有哪些常用属性transform属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。 下面我们来分解各个属性的用法:
  • 1、字体系列属性 font-family:字体系列 font-weight:字体的粗细 font-size:字体的大小 font-style:字体的风格...text-transform:控制文本大小写(就是uppercase、lowercase、capitalize这三个) color:文本颜色 3
  • 1、字体系列属性 font-family:字体系列 font-weight:字体的粗细 font-size:字体的大小 font-style:字体的风格 2、文本系列属性 text-indent:文本缩进 text-align:文本水平对齐 ...text-transform:控...
  • css3 transform

    2016-08-01 01:41:49
    CSS3 transform有哪些常用属性transform属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。 下面我们来分解各个属性的用法: ...
  • CSS3详解:transform

    2019-09-13 18:34:19
    CSS3 transform是什么? transform的含义是:改变,使…变形;转换 CSS3 transform有哪些常用属性transform属性包括:rotate() / skew()...
  • CSS3 transform

    2014-04-23 15:59:31
    CSS3 transform有哪些常用属性transform属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。 下面我们来分解各个属性的用法: ...
  • 细说CSS的transform

    2012-06-25 12:07:00
    CSS3transform有哪些常用属性transform属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotateX() 和 rotateY() ,以此类推。 下面我们来分解各个属性的用法: ...
  • CSS3 transform3D变形

    2016-02-24 15:04:00
    CSS3 transform有哪些常用属性transform属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。 下面我们来分解各个属性的用法: ...
  • CSS3 transform 详解

    2016-12-02 16:51:21
    最近在做H5,发现还是对transform了解的不是特别深刻,这里做一个总结。 CSS3 transform ...CSS3 transform有哪些常用属性 rotate() // 旋转 skew() // 倾斜 scale() // 缩放 translate(,) // 变动, 位移...
  • css3中transform的学习

    2017-05-18 20:39:10
    CSS3 transform有哪些常用属性transform属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。 下面我们来分解各个属性的用法:
  • CSS3 transform有哪些常用属性transform属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。 下面我们来分解各个属性的用法: transfo...

空空如也

空空如也

1 2 3 4 5
收藏数 86
精华内容 34
关键字:

transform属性有哪些