首页 技术 正文
技术 2022年11月7日
0 收藏 752 点赞 445 浏览 918 个字

css3的3D旋转:
rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化。
rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X轴负方向的旋转,视觉上呈现盒子宽度上的变化。
css2D旋转:
translate(a,b):a,b,均大于0时,a表示是在水平方向的位移(从左向右),b是垂直方向的位移(从上往下),
rotate(a):a>0,在水平面上顺时针旋转的度数,a<0时,在水平面上逆时针旋转度数。
scale(x,y):x是指盒子宽度的变化,y是指盒子高度的变化,0-1盒子缩小,>1盒子变大。
skew(x,y):沿x轴翻转x度数,沿y轴翻转y度数。
matrix():可以整合所有2D的转换方法,包括六个参数:a,b,c,d,e,f。
transform:属于css属性,上述方法属于该属性的值。
div{
transform:rorate(30deg);}
css3的过渡:
transition: width 1s linear 2s;
四个属性:要使用过渡的属性,过渡的时间,过渡的线性路线,过渡效果开始的时间。\

css3的动画:

设置定义动画
from~to

@keyframes
myfirst
{
from {background: red;}
to {background: yellow;}
}

0%~100%
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
绑定动画:
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;/* Firefox */
-webkit-animation: myfirst 5s;/* Safari 和 Chrome */
-o-animation: myfirst 5s;/* Opera */
}
animation: myfirst 5s linear 2s infinite alternate;
常用几个属性:1,动画名称,2,动画周期时间,3,动画速度曲线,4,动画开始时间,5,播放次数,
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,966
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,487
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,332
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,115
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,748
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,783