转换
2D转换
二维平面移动
语法：
transform:translateX(移动的距离) translateY(移动的距离);
Transform:translate(水平移动距离，垂直移动距离)
可以设置负值，水平的正值是向右移动，垂直的正值是向下移动
二维平面旋转
语法：
Transform:rotate(30deg);
旋转原点的设置
transform-origin:center(默认值)
可以设置left,top,right,bottom,center,
百分比设置：transform-origin:水平位置的百分比 垂直位置的百分比
3D转换
透视点
在所看元素的父元素或者是祖先元素上设置透视点
语法:perspective: 1000px;
三维立体的移动
语法：
transform: translateZ(200px);
transform: translate3d(水平移动,垂直移动,z轴移动);
z轴：z轴垂直于屏幕，方向是射向我们。
三维立体的旋转
语法：
/*transform: rotateX(30deg);*/
/*transform: rotateY(30deg);*/
/*transform: rotateZ(30deg);*/
transform: rotate3d(1,1,1,30deg);
解析：rotate3d(x,y,z,30deg),用x,y,z建立一个用原点射向（x,y,z）这个坐标的向量，用这个向量作为轴进行旋转。
/*二维移动*/ /*transform: translateX(400px) translateY(400px);*/ transform: translate(400px,400px); /*旋转30度*/ transform: rotate(30deg); /*旋转原点的设置 transform-origin:center(默认值) 可以设置left,top,right,bottom,center, 百分比设置：transform-origin:水平位置的百分比 垂直位置的百分比 * */ transform-origin: 0% 50%; /* 从什么视角看三维*/ body{ perspective: 1000px; } /*三维移动：transform: translateZ(200px);*/ transform: translate3d(0,0,200px); /*三维旋转*/ /*transform: rotateX(30deg);*/ /*transform: rotateY(30deg);*/ /*transform: rotateZ(30deg);*/ transform: rotate3d(1,1,1,300deg);
/*倾斜*/
transform: skew(15deg,0deg);
/*反方向*/
transform: skew(-15deg,0deg);
/*这张图宽还是1，高放大3倍；*/
img{
display: block;
margin: 300px auto;
transform: scale(1,3);
}
{
width: 300px;
height: 200px;
background: skyblue;
margin: 300px auto;
整个放大两倍
/*transform: scale(2);*/
高不变，宽了3倍
transform: scale(3,1);
}
Transition过渡
综合设置：
transition: all 2s;
分别设置：
|
/*过渡效果*/ /*transition:height 2s,transform 3s,background 2s;*/ /*transition: all 2s linear;*/ /*保留子元素3d效果*/ /*过渡的属性*/ transition-property: all; /*过渡所消耗的时间*/ transition-duration: 2s; /*过渡变化的速度 linear线性速度 ease/ease-in/ease-out cubic-bezier(0.57,-0.34, 0.37, 1.44) * */ transition-timing-function: cubic-bezier(0.57,-0.34, 0.37, 1.44); /*过渡的延迟时间*/ /*transition-delay: 2s;*/ |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #d1{ width: 200px; height: 200px; background: skyblue; transform: rotate(0deg); /*过渡效果*/ /*transition:height 2s,transform 3s,background 2s;*/ /*transition: all 2s linear;*/ /*过渡的属性*/ transition-property: all; /*过渡所消耗的时间*/ transition-duration: 2s; /*过渡变化的速度 linear线性速度 ease/ease-in/ease-out cubic-bezier(0.57,-0.34, 0.37, 1.44) * */ transition-timing-function: cubic-bezier(0.57,-0.34, 0.37, 1.44); /*过渡的延迟时间*/ /*transition-delay: 2s;*/ } /*鼠标悬浮上去的状态*/ #d1:hover{ height: 400px; transform: rotate(360deg); background: purple; } </style> </head> <body> <div id="d1"> </div> </body> </html>
Animation:动画
综合设置语法：animation: donghua 4s infinite;
分别设置：
|
/*动画*/ /*animation: donghua 5s;*/ /*动画的名称*/ animation-name: donghua; /*一次动画所花费的时间*/ animation-duration: 3s; /*动画的速度*/ animation-timing-function: linear; /*动画延迟时间*/ animation-delay: 3s; /*设置动画的次数*/ animation-iteration-count: 3; /*设置动画的往返*/ animation-direction: alternate; /*保留最后一刻状态*/ animation-fill-mode: forwards; |
不同状态写在关帧里
|
@keyframes donghua{ 过程走到了%几 要达到什么效果 0%{ transform: translate(0,0); } 50%{ transform: translate(500px,0); } 100%{ transform: translate(500px,500px); } }
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #d1{ width: 300px; height: 200px; background: skyblue; /*动画*/ /*animation: donghua 5s;*/ /*动画的名称*/ animation-name: donghua; /*一次动画所花费的时间*/ animation-duration: 3s; /*动画的速度*/ animation-timing-function: linear; /*动画延迟时间*/ animation-delay: 3s; /*设置动画的次数*/ animation-iteration-count: 3; /*设置动画的往返*/ animation-direction: alternate; /*保留最后一刻状态*/ animation-fill-mode: forwards; } 整个过程的50%所要达到的效果 @keyframes donghua{ 0%{ transform: translate(0,0); } 50%{ transform: translate(500px,0); } 100%{ transform: translate(500px,500px); } } </style> </head> <body> <div id="d1"> </div> </body> </html>
弹性布局
弹性容器：
元素上设置了display:flex;的元素就是弹性容器
弹性子元素：
元素上设置了display:flex;的元素就是弹性容器里面的直接子元素就是弹性子元素。
语法：display:flex;
主轴分布的设置：
|
justify-content flex-start flex-end center space-around:平均分布，两边有间距，两边的间距是中间的一半 space-between:平均分布，两边没有间距 space-evenly:平均分布，间距一样 |
侧轴分布的设置：align-content
|
stretch:拉伸，会默认将没有设置高度的子元素拉伸到跟父元素一样的高度。设置了高度就没有效果 flex-start flex-end center |
align-items 属性 实例 居中对齐弹性盒的各项 <div> 元素
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
提示：使用 justify-content 属性对齐主轴上的各项（水平）。
注意：容器内必须有多行的项目，该属性才能渲染出效果。
换行
语法：flex-warp:warp
多行分布的设置：
|
align-content: flex-start flex-end center space-around:平均分布，两边有间距，两边的间距是中间的一半 space-between:平均分布，两边没有间距 space-evenly:平均分布，间距一样 |
剩余空间的占据：
Flex:数字；
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .parent{ width: 100%; height: 800px; margin: 0 auto; border: 1px solid #000;
/*设置弹性容器*/ display: flex;
}
.db{ flex: 1; background: yellow; } .c1{ /*占据剩余空间的1份*/ flex: 2; background: green; }
.c2{ background: purple; width: 100px; }
</style> </head> <body> <div class="parent"> <!--db占据剩余空间3份中的1份--> <div class="db"></div> <!--c1是主要内容，占据剩余剩余空间3份中的2份--> <div class="child c1"></div> <!--假设c2是广告位，占100px宽度--> <div class="child c2"></div>
</div> </body> </html>
|
对弹性子元素进行排序
order:数字
根据order的数字，进行从小到大排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ width: 500px; height: 500px; margin: 0 auto; border: 5px solid brown; /*设置弹性容器*/ display: flex; /*主轴的分布设置 * justify-content:flex-end;右边 * flex-start 左边 * center 居中 space-around:平均分布，两边有间距，两边的间距是中间的一半 space-between:平均分布，两边没有间距 space-evenly:平均分布，间距一样 */ justify-content:space-evenly; /* 侧轴的分布 stretch:拉伸，会默认将没有设置高度的子元素拉伸到跟父元素一样的高度。设置了高度就没有效果 flex-start flex-end center * align-items:flex-end ; */ /* 弹性布局换行 flex-warp:warp * */ flex-wrap: wrap; /* 多行分布情况 align-content: flex-start flex-end center space-around:平均分布，两边有间距，两边的间距是中间的一半 space-between:平均分布，两边没有间距 space-evenly:平均分布，间距一样 * */ align-content: center; } /* 对弹性子元素进行排序 order:数字 根据order的数字，进行从小到大排序 * */ .d1{ width: 100px; height: 100px; background: yellow; order: 6; } .d2{ width: 100px; height: 100px; background: bisque; order: 5; } .d3{ width: 100px; height: 100px; background: blue; order: 4; } .d4{ width: 100px; height: 100px; background: bisque; order: 3; } .d5{ width: 100px; height: 100px; background: blue; order: 2; } .d6{ width: 100px; height: 100px; background: blue; order: 1; } </style> </head> <body><div class="parent"> <div class="child d1">1</div> <div class="child d2">2</div> <div class="child d3">3</div> <div class="child d4">4</div> <div class="child d5">5</div> <div class="child d6">6</div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ width: 100%; height: 800px; margin: 0 auto; border: 1px solid #000; /*设置弹性容器*/ display: flex; } .db{ flex: 1; background: yellow; } .c1{ /*占据剩余空间的1份*/ flex: 2; background: green; } .c2{ background: purple; width: 100px; } </style> </head> <body> <div class="parent"> <!--db占据剩余空间3份中的1份--> <div class="db"></div> <!--c1是主要内容，占据剩余剩余空间3份中的2份--> <div class="child c1"></div> <!--假设c2是广告位，占100px宽度--> <div class="child c2"></div> </div> </body> </html>
一个动画案例-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ perspective: 1000px; } .mofang{ width: 200px; height: 200px; margin: 300px auto; /*保留子元素3d效果*/ transform-style: preserve-3d; /*相对定位*/ position: relative; /*动画名字，时间，无限滚动*/ animation: donghua 1s infinite; } .mofang .a1{ width: 100px; height:100px; /*保留子元素3d效果*/ transform-style: preserve-3d; /*相对定位*/ position: absolute; left: 50px; top: 50px; /*动画名字，时间，无限滚动*/ animation: donghua 1s infinite; } @keyframes donghua{ from{ transform: rotate3d(1,1,0,0deg); } to{ transform: rotate3d(1,1,0,360deg); } } .mofang .child{ width: 200px; height: 200px; /*绝对定位*/ position: absolute; left: 0; top: 0; /*透明度*/ opacity: 0.6; /*所有过渡效果花费2s*/ transition: all 2s; } .mofang .child1{ width: 100px; height: 100px; /*绝对定位*/ position: absolute; left: 0; top: 0; /*透明度*/ opacity: 0.6; /*所有过渡效果花费2s*/ transition: all 4s; } .front{ /*插入背景图*/ background-image: url(img/img1.jfif); /*背景图不重复*/ background-repeat: no-repeat; /*背景图位置居中*/ background-position: center; /*背景图大小:100% ，宽自定义*/ background-size: 100% auto; transform: translateZ(100px); }/*鼠标点击*/ .front1{ /*插入背景图*/ background-image: url(img/1525400116965.jpg); /*背景图不重复*/ background-repeat: no-repeat; /*背景图位置居中*/ background-position: center; /*背景图大小:100% ，宽自定义*/ background-size: 100% auto; transform: translateZ(50px); } .mofang:hover .front{ /*往Z轴移动200px*/ transform: translateZ(200px); } .back{ background-image: url(img/img2.jfif); background-repeat: no-repeat; background-position: center; background-size: 100% auto; transform: translateZ(-100px); } .back1{ background-image: url(img/4163e6ab177c4284a69e6340e8d2171b.jpeg); background-repeat: no-repeat; background-position: center; background-size: 100% auto; transform: translateZ(-50px); } .mofang:hover .back{ transform: translateZ(-200px); } .left{ background-image: url(img/img3.jfif); background-repeat: no-repeat; background-position: center; background-size: 100% auto; transform: rotateY(-90deg) translateZ(100px); } .left1{ background-image: url(img/21.jpg); background-repeat: no-repeat; background-position: center; background-size: 100% auto; transform: rotateY(-90deg) translateZ(50px); } .mofang:hover .left{ transform: rotateY(-90deg) translateZ(200px); } .right{ background-image: url(img/img4.jfif); background-repeat: no-repeat; background-position: center; background-size: 100% auto; transform: rotateY(90deg) translateZ(100px); } .right1{ background-image: url(img/201206191116426249.jpg); background-repeat: no-repeat; background-position: center; background-size: 100% auto; transform: rotateY(90deg) translateZ(50px); } .mofang:hover .right{ transform: rotateY(90deg) translateZ(200px); } .top{ background-image: url(img/img5.jfif); background-repeat: no-repeat; background-position: center; background-size: 100% auto; transform: rotateX(90deg) translateZ(100px); } .top1{ background-image: url(img/1525400116965.jpg); background-repeat: no-repeat; background-position: center; background-size: 100% auto; transform: rotateX(90deg) translateZ(50px); } .mofang:hover .top{ transform: rotateX(90deg) translateZ(200px); } .bottom{ background-image: url(img/img6.jfif); background-repeat: no-repeat; background-position: center; background-size: 100% auto; transform: rotateX(-90deg) translateZ(100px); } .bottom1{ background-image: url(img/006lpPzYly1fxcnr3mso3j30k00u075i.jpg); background-repeat: no-repeat; background-position: center; background-size: 100% auto; transform: rotateX(-90deg) translateZ(50px); } .mofang:hover .bottom{ transform: rotateX(-90deg) translateZ(200px); } </style> </head> <body> <div class="mofang"> <div class="child front"></div> <div class="child back"></div> <div class="child left"></div> <div class="child right"></div> <div class="child top"></div> <div class="child bottom"></div> <div class="a1"> <div class="child1 front1"></div> <div class="child1 back1"></div> <div class="child1 left1"></div> <div class="child1 right1"></div> <div class="child1 top1"></div> <div class="child1 bottom1"></div> </div> </div> </body> </html>
结果：在（网址中）二维码中https://00009ec4-000068ee-00006797.github.io/-/
