文档章节

css 2D动画

o
 osc_4nmshwhm
发布于 2018/08/06 23:25
字数 1072
阅读 0
收藏 0
red

精选30+云产品,助力企业轻松上云!>>>

2D动画:

      通过 CSS3  transform转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸.

  1. 2D移动:translate()。使用translate()函数,你可以把元素从原来的位置移动。移动参照元素左上角原点

a)     语法:translate(tx)  | translate(tx,ty)

b)     tx是一个代表X轴(横坐标)移动的向量长度,当其值为正值时,元素向X轴右方向移动,反之其值为负值时,元素向X轴左方向移动。

c)      ty是一个代表Y轴(纵向标)移动的向量长度,当其值为正值时,元素向Y轴下方向移动,反之其值为负值时,元素向Y轴上方向移动。如果ty没有显式设置时,相当于ty=0。

d)     也可以使用translateX(tx) 或者 translateY(ty)

e)     案例示例:

div:hover{
    /*设置两个值,第一个参数表示X方向  第二个参数表示Y方向*/
    /*transform: translate(100px,100px);*/
    /*也可以只传入一个参数,表示X方向*/
    /*transform: translate(100px);*/
    /*也可以指定具体的方向,如下代码,表示Y方向正值方向上移动100px*/
    transform:translateY(100px);
}

  1. 2D缩放:scale():缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值,使一个元素缩小;而任何大于或等于1.01的值,让元素显得更大.缩放是参照元素中心点。

a)     语法:scale(sx|ty)  | scale(sx,sy)

b)     sx:用来指定横向坐标(X轴)方向的缩放向量,如果值为0.01~0.99之间,会让对象在X轴方向缩小,如果值大于或等于1.01,对象在Y轴方向放大。

c)      sy:用来指定纵向坐标(Y轴)方向的缩放量,如果值为0.01~0.99之间,会让对象在Y轴方向缩小,如果值大于或等于1.01,对象在Y轴方向放大

d)     也可以使用scaleX(sx) 或者scaleY(sy)

e)     案例示例:

div:hover{
    /*传入两个值,第一个参数表示X方向的缩放 第二个参数表示Y方向上的缩放*/
    /*transform: scale(2,0.5);*/
    /*也可以只传入一个值,表示X方向和Y方向上相同的缩放*/
    /*transform: scale(2);*/
    /*也可以指定具体方向上的缩放*/
    transform: scaleX(2);
}
  1. 2D旋转:rotate():旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作,接受一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转

a)     语法:rotate(a);

b)     a: 代表的是一个旋转的角度值。其取值可以是正的,也可以是负的。如果取值为正值时,元素默认之下相对元素中心点顺时针旋转;如果取值为负值时,元素默认之下相对元素中心点逆时针旋转

c)      案例示例:

div:hover{
    /*传入旋转的角度,如果正值,则进行顺时针旋转*/
    /*transform: rotate(90deg);*/
    /*如果传入负值,则逆时针旋转*/
    transform: rotate(-270deg);
}
  1. 2D翻转:skew():能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状

a)     语法:skew(ax)  |  skew(ax,ay)

b)     ax:用来指定元素水平方向(X轴方向)倾斜的角度。

c)      ay:用来指定元素垂直方向(Y轴方向)倾斜的角度。如果未显式的设置这个值,其默认为0。

d)     也可以使用skewX(sx) 或者 skewY(sy)

e)     案例示例:

div:hover{
    /*在X方向上倾斜30度*/
    transform: skewX(30deg);
}
  1. transform-origin: 允许你改变被转换元素的位置。

a)     示例:

div{
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background-color: red;
    /*添加过渡*/
    transition:all .5s;
    /*设置缩放的中心,默认是元素中心位置,现修改为元素左上角*/
    transform-origin: 0px 0px;
}
div:hover{
    transform: scale(2);
}

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Springboot+Redis综合运用/缓存使用

项目引入依赖(安装redis自行百度) <!-- spring-boot redis --><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactI......

心田已荒
15分钟前
5
0
puppeteer csdn 登录 [失败, 跨域cookie无法解决]

使用 puppeteer 登录csdn 暂时没能解决这个问题 滑块可以滑到右边 原因在于cookie const puppeteer = require('puppeteer');const uid = '===';const pwd = '===';(async () => { ......

阿豪boy
34分钟前
9
0
即使使用__init__.py,也如何解决“尝试以非软件包方式进行相对导入”

问题: I'm trying to follow PEP 328 , with the following directory structure: 我正在尝试使用以下目录结构来遵循PEP 328 : pkg/ __init__.py components/ core.py __init_......

富含淀粉
34分钟前
19
0
Java线程池

前言 Java中对线程池的抽象是ThreadPoolExecutor类,Executors是一个工具类,内置了多种创建线程池的方法: newFixedThreadPool:固定长度线程池 newCachedThreadPool :可缓存线程池 newSin...

nullpointerxyz
41分钟前
51
0
Python笔记:用Python制作二维码

这些年,二维码在我国的日常使用频率特别大。因为其具有简单及安全性吧!除了用网络工具制作二维码,其实用JavaScript或Python也可以制作二维码,而且更有个性。 示例一(制作普通黑白二维码...

tengyulong
53分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部