css3旋转过渡(css32d旋转)
CSS3 过渡效果transition的基本使用
在CSS3中新增了元素的过渡效果属性:transition
transition也是一个复合属性,包括四个值分别是:
1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay
基本使用如下:
多个属性可以单独设置,也可以通过transition一起设置
例如:点击按钮时,方块宽度由100px变成200px,延迟1s,过渡时间用了2s,速度是按照cubic-bezier设定的一个速度
以上就是transition的基本使用!
css3 transition和transform的应用
一、首先学习的是transition属性(zoom不支持transition,适用于具体数值的属性值变化或者背景图的变换)
transition 过渡 作为一个复合属性
1.transition-property 指定可以过渡的属性
默认值是all 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。
2.transition-duration 指过渡完成的时间
默认值为0s
3.transition-timing-function 过渡的动画类型
默认值为ease
ease 规定慢速开始,然后变快,之后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
linear 规定以相同速度开始至结束的过渡效果
cubic bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值
4.transition-delay 延迟执行过渡的时间
默认值为0s
二、transform属性
transform 向元素应用2D或3D转换 只对block级元素生效
1.translate 位移
translateX() 在x轴上发生位移或者变形
translateY() 在y轴上发生位移或者变形
translate(x,y) 在x轴 ,y轴上发生位移或者变形 当只有一个值的时候,只有x轴生效
2.scale 缩放
scaleX() 设置在x轴上发生缩放
scaleY() 设置在y轴上发生缩放
scale(x,y) 设置在x轴,y轴上发生缩放 当只有一个值的时候,x,y轴都发生缩放可以设置负数 使用场景:设置小于12px的字体
3.rotate 旋转 2d旋转 设置元素在2d平面旋转(z轴),正数按顺时针,负数按逆时针
rotateX()设置沿x轴旋转
rotateY () 设置沿y轴旋转
4.skew 倾斜
skewX 绕x轴发生倾斜
skewY 绕y轴发生倾斜
skew(x,y) 绕x,y轴发生的倾斜 x轴和y轴和我们理解的相反,常用于平行四边形图案
三、transform-origin: 设置旋转元素的基点位置
transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用;
因为我们元素默认基点就是其中心位置,换句话说我们没有使用transform-origin改变元素基点位置的情况下,transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。
但有时候我们需要在不同的位置对元素进行这些操作,那么我们就可以使用transform-origin来对元素进行基点位置改变,使元素基点不在是中心位置,以达到你需要的基点位置。
下面我们主要来看看其使用规则:
transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom 。
语法:-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ] ?
transform-origin接受两个参数,它们可以是百分比,em,px等具体的值,也可以是left,center,right,或者 top,center,bottom等描述性参数 ;
top left | left top 等价于 0 0;
top | top center | center top 等价于 50% 0
right top | top right 等价于 100% 0
left | left center | center left 等价于 0 50%
center | center center 等价于 50% 50%(默认值)
right | right center | center right 等价于 100% 50%
bottom left | left bottom 等价于 0 100%
bottom | bottom center | center bottom 等价于 50% 100%
bottom right | right bottom 等价于 100% 100%
css3动画使用
animation实现动画由俩个部分组成,通过类似flash动画的关键帧来申明一个动画,在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
关键帧 例如:
调用关键帧:
语法 animation:animation-name?animation-duration?animation-timing-function??animation-delay?animation-iteration-count animation-direction
animation-name 由?@keyframes 创建的动画名称
animation-duration过渡时间
animation-timing-function过渡方式
animation-delay延迟时间
animation-iteration-count 动画的播放次数 通常值为1次 特殊值infinite为无限播放
animation-direction动画的播放方向,alternate为偶数次向前播放,normal动画每次都是循环向前播放
练习如下:
该图形的变化从左上角到右上角来回跳动的一个过程
linear ?规定以相同速度开始至结束的过渡效果
ease ?规定慢速开始,然后变快,然后慢速结束的过渡效果(默认值)
ease-in 规定以慢速开始的过渡效果
ease-out ?规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
?perspective:500px;透视 也可以理解为视距,可以理解为 你的眼睛距离物体的距离 ?距离物体越近 物体就越大,距离物体越远 物体就越小
transform: rotateZ(30deg)?rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转
transform: rotateY(30deg) rotateY是绕着y轴旋转?正值是向里面旋转 负值是向外面旋转
transform: rotateX(30deg)rotateX是绕着x轴旋转?正值是向里面旋转?负值是向外面旋转
transform: rotate(30deg)参数a取正值时元素相对原来中心顺时针旋转
?transform: translate3d(0, 0, 200px);效果如下:
?translate3d(0,0,200px) 表示z轴向前移动二楼200px(近大远小的原理)
?translate3d 里面分别表示x轴距离 y轴距离 和z轴距离
?要想实现3d效果必须要在父元素上加上一个属性perspective
如果想让子元素有3d的效果 必须要给父元素设置transform-style,默认值是flat,?想变成3d效果要把值设置成preserve-3d
也可以?设置旋转后的div的上下位置,在.b:hover里面加上transform-origin:top/bottom/left/right
css3过渡(transition)和动画(animation)变换(transform )
| 值 | 描述 |
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间,以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
animation-fill-mode : none | forwards | backwards | both;
/*none:不改变默认行为。
forwards :当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both:向前和向后填充模式都被应用。 */
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform-origin: bottom right;/* 设置旋转点,默认是中心点 */
参考