css3中 3d变形transform
先介绍这个之前引入一个新知识;由于这个参数是css3的样式,必然存在老版本浏览器不支持的情况。因此为了保证兼容之前的浏览器,于是就有了浏览器的前缀。
浏览器的前缀 | 浏览器
-webkit- | Google Chrome, Safari ,Android Browser
-moz- | Firefox
-o- | Opera
-ms- | Internet Explorer , Edge
-khtml- | Konqueror
rotate(旋转) 、translate(移动)、scale(缩放)
这个和2d的差不多,无非就是在2d的维数增加Z轴。关于2d的样式设置,请看我之前的博客。
3d旋转:四个函数。
deg为输入的参数的单位"度"。* 表示需要输入的数值。
transform: rotate3d(x,y,z,* deg) ; //定义3d旋转
transform: rotateX( * deg); //关于x轴旋转
transform: rotateY(* deg) ; //关于y轴旋转
transform: rotateY(* deg) ; //关于z轴旋转
3d平移:两个函数。
transform: translate3d(x,y,z); //3d平面上进行x、y、z轴移动。
transform: translateZ(); //在z轴移动
3d缩放:两个函数.
transform: scale3d(x,y,z) ; //定义3d缩放
transform: scaleZ(); //定义z轴的缩放
注意:skew() 倾斜属性没有3d的。还有这些变形的效果可以叠加的。demo如下。
-webkit-transform: translate(15px,-20px) rotate(30deg) ; //平移和旋转一起叠加使用,同时引入浏览器前缀.
css3中动画
demo:
-webkit-animation: fly 2s linear 0s infinite normal;
@-webkit-keyframes fly {
0%{
transform: rotate(0deg); //初始状态
}
50%{
transform: rotate(180deg); //中间状态
}
100%{
transform: rotate(360deg); //最后状态
}
}
//第二种写法。
@-webkit-keyframes rive {
from{
top: 0;
left: 0;
background-color: #999999;
}
to{
top: 200px;
left: 200px;
background-color: gold;
}
}
上面有6个参数。依次是:
animation-name: 动画名称,方便用于调用动画 ; //不可以省略。
animation-duration: 动画完成时间,单位可以是 s 也可以是 ms ; //一定要书写的不可以省略。
animation-timing-function: 动画时间函数 默认是 ease,其中常用的还有linear 匀速。;
animation-delay: 动画延迟时间 默认是0s;
animation-iteration-count: 动画迭代次数 默认是 1,其中无限次数为 infinite;
animation-direction: 属性定义是否应该轮流反向播放动画 默认是normal 就是不轮流方向播放; 常用轮流反向播放为 alternate;
声明动画:
@-webkit-keyframes fly{} //其中fly 被声明为动画名称。中间的-webkit-为浏览器前缀.。
还可以有 @-moz-keyframes fly{} 表示兼容火狐的书写方式,如需要兼容其他浏览器,则需要加上相应的前缀就可以。
form,to写法比较粗糙,若需要更细腻的动画效果,采用多帧 百分比 %来进行动画实现。
注意,在animation前面别忘了浏览器前缀。
css3伸缩布局
demo:
html:
<!--伸缩布局-->
<div class="width">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
css:
.width{
height: 200px;
width: 60%;
margin: 50px auto;
display: flex;
min-width: 150px;
}
.width div:nth-child(1) {
background-color: pink;
width: 200px;
}
.width div:nth-child(2) {
background-color: purple;
margin: 0 10px;
flex: 2;
}
.width div:nth-child(3) {
background-color: blue;
flex: 1;
}
效果如下:
这里面父盒子使用 display:flex; 来进行伸缩布局。默认是根据行来划分。就是一行切成多列。
子元素div 中通过份数 flex: 1;,flex:2 ;来进行宽度的划分。其中还可以对子元素进行宽度设置,不参与宽度的份数划分。
补充:如需将按列进行划成多行则加上: flex-direction: column;
背景缩放、背景渐变、多背景
缩放:
-webkit-background-size: 200px auto; /*以200px 宽度比例进行缩放。其中auto可以省略*/
background-size: 200px auto;
background-size:cover;
background-size:contain;
/* cover 全覆盖, contain 按比例进行缩放,最快的一边进行扩展至指定大小则不在变化,这个图片一般比指定的盒子大小要小 */
渐变:
background: -webkit-linear-gradient(left top ,green 0%,yellow 50%,red 100%);
/*background:-webkit-linear-gradient(渐变的起始位置, 颜色 位置, 颜色 位置....)*/
效果图如下:
多背景:
background: url("../img/jd-2.jpg") no-repeat top left , url("../img/jd-3.jpg") no-repeat bottom right;
background-color: #999999; //这个一定要书写在下面。以防止覆盖。
练习
实现一下效果: