CSS3中的2D和3D转换知识介绍

一  2D转换

转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果。

1、移动 translate(x, y) 可以改变元素的位置,x、y可为负值;

2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数,不可为负值;

4、旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针;

5、倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜

二  3D转换

1、3D坐标轴

用X、Y、Z分别表示空间的3个维度,三条轴互相垂直。如下图

2、左手坐标系

伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

3、左手法则

左手握住旋转轴,竖起拇指指向旋转轴正方向,正向就是其余手指卷曲的方向。

三   动画

动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

1、必要元素:

a、通过@keyframes指定动画序列;

b、通过百分比将动画序列分割成多个节点;

c、在各节点中分别定义各属性

d、通过animation将动画应用于相应元素;

2、关键属性

a、animation-name设置动画序列名称

b、animation-duration动画持续时间

c、animation-delay动画延时时间

d、animation-timing-function动画执行速度,linear、ease等

e、animation-play-state动画播放状态,play、paused等

f、animation-direction动画逆播,alternate等

g、animation-fill-mode动画执行完毕后状态,forwards、backwards等

h、animation-iteration-count动画执行次数,inifinate等

时间: 2024-10-08 23:02:20

CSS3中的2D和3D转换知识介绍的相关文章

CSS3动画与2D、3D转换

一.过度动画:transition 五个属性: transition-property css 样式属性名称 transition-duration 动画持续时间(需要单位s) transition-timing-function 动画效果函数名称 linear.ease.ease-in.ease-out. ease-in-out.cubic-bezier(n,n,n,n) transition-delay 延迟执行动画的时间 animation-play-state:paused;暂停动画执行

CSS3的2D与3D转换

2D和3D转换涉及到数学中的知识,作为一个数学专业的毕业生,不研究一下岂不是对不起自己的专业? 首先来看几个参数: 1.transform-origin:origin(起源,起点),也即变形的起点,在数学上可以理解为坐标原点. 其语法为:transform-origin:[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | l

css3动画与2D、3D之间的转换

应用css3中的transition(过渡动画).@keyframes(关键帧动画).transform(2D.3D转换)可以实现一些小的动画效果. 一.transition—过渡动画 <!DOCTYPE html> <html><head> <title>基本图像的放大缩小</title> <meta charset="utf-8"> <style type="text/css">

CSS3 2D、3D 转换

一.CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 浏览器支持 Internet Explorer 10.以及 Opera 支持 transform 属性. 注释:Internet Explorer 9 需要前缀 -ms-. Chrome 和 Safari 需要前缀 -webkit-. 二.2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 1.translate(

CSS3 2D、3D转换

2D转换方法:transform().rotate().scale().skew().matrix() 3D转换方法:rotateX().rotateY() 1.示例代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D.3D转换</title> <style> section{width:

过渡及2D与3D转换

一.过渡 什么是过渡(transition)? 过渡(transition)是元素从一种样式逐渐改变为另一种的效果. 1.要实现这一点,必须规定两项内容: a.规定您希望把效果添加到哪个CSS属性上 :   b.规定效果的时长 . 格式:transition: width/(all) 2s;(注:当只需要width时就直接写width,如果需要过渡所有元素就可以使用all)    注:如果时长未规定,则不会有过渡效果,因为默认值是 0. 2.效果开始于指定的CSS属性改变值时.CSS属性改变的典

CSS笔记(十二)CSS3之2D和3D转换

参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵. translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素. translateX(n) 定义 2D 转换,沿着 X 轴移动元素. translateY(n) 定义 2D 转换,沿着 Y 轴移动元素. scale(x,y) 定义 2D 缩放转换,改

css3中伪类选择器和伪元素介绍

利用html5和css3开发出炫酷的网页,那么对于一个web前端开发者,css3也是必须要掌握的,下面和大家讨论一下css3中伪类选择器和伪元素. 类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如:p.left{text-align: left}p.rigth{text-align: right} 伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 最常见的伪类选择器 a:link{ color:

css3 中的2D转换

一.CSS3转换 通过转换实现对对元素进行旋转.缩放.移动.拉伸的效果:这种原来必须要通过JS或者图片处理才可以实现的效果,现在都可以通过CSS3来完成. 2D转换采用transform属性来实现效果. 二.transform属性的取值 rotate()函数   是可以进行旋转的函数 scale()函数    可以进行缩放的函数 三.函数的用法 transform:rotate( deg);旋转 将transform属性的取值设置为rotate函数,在括号里的是旋转的角度,其单位是deg(deg