2D、3D转换
过渡
动画
多列
一，通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
二，2D转换方法：
translate()
/*平移*/ .div2{ transform: translate(200px,100px); /*safari chrome*/ -webkit-transform: translate(200px,100px); /*IE*/ -ms-transform: translate(200px,100px); /*opera*/ -o-transform: translate(200px,100px); /*Firefox*/ -moz-transform: translate(200px,100px); }
rotate()
/*旋转*/ .div2{ transform: rotate(200deg); /*safari chrome*/ -webkit-transform: rotate(200deg); /*IE*/ -ms-transform: rotate(200deg); /*opera*/ -o-transform: rotate(200deg); /*Firefox*/ -moz-transform: rotate(200deg); }
scale()
/*缩放 宽2倍，高1倍不变*/ .div2{ transform: scale(2,1); /*safari chrome*/ -webkit-transform: scale(2,1); /*IE*/ -ms-transform: scale(2,1); /*opera*/ -o-transform: scale(2,1); /*Firefox*/ -moz-transform: scale(2,1); }
skew()
/*倾斜*/ .div2{ transform: skew(50deg,50deg); /*safari chrome*/ -webkit-transform: skew(50deg,50deg); /*IE*/ -ms-transform: skew(50deg,50deg); /*opera*/ -o-transform: skew(50deg,50deg); /*Firefox*/ -moz-transform: skew(50deg,50deg); }
matrix()
三，3D转换方法：
rotateX()
rotateY()
/*3D rotateX*/ .div2{ transform: rotateX(50deg); /*safari chrome*/ -webkit-transform: rotateX(50deg); /*IE*/ -ms-transform: rotateX(50deg); /*opera*/ -o-transform: rotateX(50deg); /*Firefox*/ -moz-transform: rotateX(50deg); }二，CSS3过渡是元素从一种样式转换成另一种样式
动画效果的CSS
动画执行的时间
三，属性
.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>过渡</title> <link type="text/css" rel="stylesheet" href="transitionIndex.css" /> </head> <body> <div>效果展示</div> </body> </html>
.css
div{ width: 100px; height: 100px; background-color: blueviolet; -webkit-transition: width 2s,height 2s,-webkit-transform 2s; transition: width 2s,height 2s,transform 2s; /*延时执行2秒动画*/ transition-delay: 2s; } div:hover{ width: 200px; height: 200px; transform: rotate(360deg); -webkit-transform: rotate(360deg); }
在浏览器展示效果：
一，通过CSS3，也可以进行创建动画了。
二，CSS3的动画需要遵循@keyframes规则
规定动画的时长
规定动画的名称
.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>动画效果</title> <link rel="stylesheet" type="text/css" href="animstyle.css" /> </head> <body> <div>动画效果</div> </body> </html> .CSS
div{ width: 100px; height: 100px; background-color: red; position: relative; /*一直执行*/ animation: anim 5s infinite alternate; -webkit-animation: anim 5s infinite alternate; /* 执行一次 animation: anim 5s; -webkit-animation: anim 5s; */ } @keyframes anim { 0%{background: red;left: 0px;top: 0px} 25%{background: blue;left:200px;top: 0px} 50%{background: green;left: 200px;top: 200px} 75%{background: orange;left: 0px;top: 200px} 100%{background: red;left: 0px;top:0px} } @-webkit-keyframes anim { 0%{background: red;left: 0px;top: 0px} 25%{background: blue;left:200px;top: 0px} 50%{background: green;left: 200px;top: 200px} 75%{background: orange;left: 0px;top: 200px} 100%{background: red;left: 0px;top:0px} } 在浏览器展示效果：
