转换
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;
}
@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>
原文地址：https://www.cnblogs.com/406070989senlin/p/10925918.html