一、CSS3 2D转换
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
(一)、2D平移
translate(x, y)
**translate(x, y)**方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动
div {
transform: translate(300px, 200px);
}
translateX()
translateX(n) 定义 2D 平移,沿着 X 轴移动元素
div {
transform: translateX(300px);
}
translateY()
translateY(n) 定义 2D 平移,沿着 Y 轴移动元素
div {
transform: translateY(200px);
}
(二)、2D缩放
scale()
**scale(x, y)**方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
div {
transform: scale(2, 2);
}
scaleX()
scaleX(n) 定义 2D 缩放转换,改变元素的宽度
div {
transform: scaleX(3);
}
scaleY()
scaleY(n) 定义 2D 缩放转换,改变元素的高度
div {
transform: scaleY(4);
}
(三)、2D倾斜
skew()
**skew(x, y) **方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
div {
transform: skew(20deg, 30deg);
}
skewX()
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴翻转
div {
transform: skewX(20deg);
}
skewY()
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴翻转
div {
transform: skewY(30deg);
}
(四)、2D旋转
rotate(deg) 方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转
div {
transform: rotate(30deg)
}
(五)、基点位置
transform-origin 属性允许您改变被转换元素的位置
2D 转换元素能够改变元素 x 和 y 轴
-
属性必须与 transform 属性一同使用
-
语法:
transform-origin: x-axis y-axis z-axis;
-
参数
x-axis {length | string}
: 定义视图被置于x轴的何处,可能的值:left center rightY-axis {length | string}
: 定义视图被置于Y轴的何处,可能的值:top center bottomZ-axis {length}
: 定义视图被置于z轴的何处
-
实例
div { transform: rotate(45deg); transform-origin: 20% 40% }
二、CSS3 3D转换
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
(一)、3D位移
translate3d()
** translate3d(x, y, z)**:指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
translateZ()
translateZ(n) 定义 3D 平移,沿着 Z 轴移动元素
div {
transform: translateZ(50px);
}
(二)、3D缩放
scale3d()
scale3d(x, y, z):指定对象的3D缩放。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴。参数不允许省略
scaleZ()
scaleZ(n) 定义 3D 缩放转换,沿着Z轴方向缩放
div {
transform: scaleZ(50deg);
}
(三)、3D旋转
rotate3d()
rotate3d(x, y, z, d):定义一个变换,它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正,运动将为顺时针,如果为负,则为逆时针
- 参数
x {number}
:表示旋转轴X坐标方向的矢量y {number}
:表示旋转轴Y坐标方向的矢量z {number}
:表示旋转轴Z坐标方向的矢量d {angle}
:旋转角度。正的角度值表示顺时针旋转,负值表示逆时针旋转
div {
transform: rotate3d(1, 0, 0, 60deg);
}
rotateX()
rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转
div {
transform:rotateX(120deg);
}
rotateY()
rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转
div {
transform:rotateY(120deg);
}
rotateZ()
rotateY() 方法,元素围绕其 Z 轴以给定的度数进行旋转
div {
transform:rotateZ(120deg);
}
(四)、3D空间位置显示
**transform-style **属性规定如何在 3D 空间中呈现被嵌套的元素
-
注释:该属性必须与 transform 属性一同使用
-
语法:
transform-style: flat|preserve-3d
-
参数
flat
:表示所有子元素在2D平面呈现preserve-3d
:表示所有子元素在3D空间中呈现
-
实例:使被转换的子元素保留其 3D 转换
(五)、透视效果
**perspective **属性定义 3D 元素距离视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图
-
注释:perspective 属性只影响 3D 转换元素
-
语法:
perspective: number|none;
-
参数
{number}
:元素距离视图的距离,以像素计none
:默认值。与 0 相同。不设置透视
-
实例:使被转换的子元素保留其 3D 转换
<div id="div1"> <div id="div2">Hello</div> </div>
#div1 { perspective: 300 } #div2 { transform: rotateX(45deg) }
(六)、backface-visibility
backface-visibility:属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时,该属性很有用
-
语法:
backface-visibility: visible|hidden;
-
参数
visible
:背面是可见的hidden
:背面是不可见的
-
实例
<div class='div1'>div1</div> <div class='div2'>div2</div>
div { widht:60px; height: 60px; transform: rotateY(180deg); } .div1 { backface-visibility: hidden; } .div2 { backface-visibility: visible; }
三、CSS3 过渡
CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript
它是如何工作?
CSS3 过渡是元素从一种样式逐渐改变为另一种的 效果。
要实现这一点,必须规定两项内容:
指定要添加效果的CSS属性
指定效果的持续时间。
(一)、transition
transition:属性是一个简写属性,用于设置四个过渡属性
transition-property
、transition-duration
、transition-timing-function
和transition-delay
-
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果
-
语法:
transition: property duration timing-function delay;
-
实例
div { width: 100px; transition: all 2s linear 0.5s; } div:hover { width: 300px; }
(二)、transition-property
transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)
-
提示:过渡效果通常在用户将鼠标指针浮动到元素上时发生
-
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果
-
语法:
transition-property: none|all|property;
-
参数
none
: 没有属性会获得过渡效果all
: 所有属性都会获得过渡效果{property}
: 定义应用过渡效果的css属性名称,列表以逗号隔开
-
实例
div { transition-property: all; transition-duration: 0.5s; width: 10px } div:hover { width: 100px }
(三)、transition-duration
transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)
-
语法:
transition-duration: time
-
参数
{time}
: 规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值是 0,意味着不会有效果
-
实例
div { transition-property: all; transition-duration: 1.5s; width: 10px } div:hover { width: 100px }
(四)、transition-timing-function
transition-timing-function 属性规定过渡效果的速度曲线,该属性允许过渡效果随着时间来改变其速度
-
语法:
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n);
-
参数
linear
:规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。ease
: 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。ease-in
: 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。ease-out
:规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。ease-in-out
: 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。cubic-bezier(n,n,n,n)
: 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
-
实例
div { transition-property: all; transition-duration: 1.5s; transition-timing-function: linear; width: 10px } div:hover { width: 100px }
(五)、transition-delay
transition-delay 属性规定过渡效果何时开始
-
语法:
transition-delay: time;
-
参数
{time}
:规定在过渡效果开始之前要等待的时间
-
实例
div { transition-property: all; transition-duration: 1.5s; transition-delay: 0.5s width: 10px } div:hover { width: 100px }
四、课后作业
- 熟悉2D转换,并使用每个转换方式进行编写
- 熟悉3D转换,并使用每个转换方式进行编写
- 熟悉css3过渡,并使用其制作一个css过渡页面