一、2D转换可以对元素进行移动、缩放、转动、拉长或拉伸
(1)、基本语法transform
(2)、transform-origin 设置旋转的中心点
示例:
<body>
<button type="button" onclick="func1()">按钮1</button>
<div class="box1">123123123</div>
</body>
<script type="text/javascript">
var box1 = document.getElementsByClassName("box1")[0];
function func1(){
box1.style.transformOrigin = "150% 0%";
}
</script>
(3)、正数顺时针方向,反而负值就是逆时针
(4)、单独设置某一个轴值,只会作用最后一个
1、translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
(1)、 translate(X,Y) translateX(X) translateY(Y)
示例:
<body>
<button type="button" onclick="func1()">按钮1</button>
<button type="button" onclick="func2()">按钮2</button>
<div class="box1">123123123</div>
</body>
<script type="text/javascript">
var box1 = document.getElementsByClassName("box1")[0];
function func1(){
box1.style.transform = "translate(200px,200px)";
box1.style.transform = "translateX(300px)";
box1.style.transform = "translateY(100px)";
}
function func2(){
box1.style.transform = "translate(0px,0px)";
box1.style.transform = "translateX(0px)";
box1.style.transform = "translateY(300px)";
}
</script>
2、 rotate(角度deg)方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
(1)、rotate() rotateX() rotateY()
示例:
<body>
<button type="button" onclick="func1()">按钮1</button>
<button type="button" onclick="func2()">按钮2</button>
<div class="box1">123123123</div>
</body>
<script type="text/javascript">
var box1 = document.getElementsByClassName("box1")[0];
function func1(){
box1.style.transform = "rotate(30deg)";
box1.style.transform = "rotateX(30deg)";
box1.style.transform = "rotateY(60deg)";
}
function func2(){
box1.style.transform = "rotateY(90deg)";
}
</script>
3、 scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
(1)、scale(宽度倍数,高度倍数) scaleX(宽度倍数) scaleY(高度倍数)
示例:
<body>
<button type="button" onclick="func1()">按钮1</button>
<button type="button" onclick="func2()">按钮2</button>
<div class="box1">123123123</div>
</body>
<script type="text/javascript">
var box1 = document.getElementsByClassName("box1")[0];
function func1(){
box1.style.transform = "scale(0.5,1)";
box1.style.transform ="scaleX(1.5)";
}
function func2(){
box1.style.transform = "scale(1,1)";
box1.style.transform ="scaleY(1.5)";
}
</script>
4、skew(X,Y): 包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空, 则默认为0,参数为负表示向相反方向倾斜。
(1)、skewX(X) skewY(Y)
示例:
<body>
<button type="button" onclick="func1()">按钮1</button>
<button type="button" onclick="func2()">按钮2</button>
<div class="box1">123123123</div>
</body>
<script type="text/javascript">
var box1 = document.getElementsByClassName("box1")[0];
function func1(){
box1.style.transform = "skew(30deg,90deg)";
box1.style.transform = "skewX(30deg)";
}
function func2(){
box1.style.transform = "skew(90deg,60deg)";
box1.style.transform = "skewY(90deg)";
}
</script>
5、matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能 ,matrix(宽度缩放,Y倾斜,X倾斜,高度缩放,X平移,Y平移)方法和2D变换方法合并成一个。 matrix()
示例:
<body>
<button type="button" onclick="func1()">按钮1</button>
<div class="box1">123123123</div>
</body>
<script type="text/javascript">
var box1 = document.getElementsByClassName("box1")[0];
function func1(){
box1.style.transform = "matrix(1,0,0,1,0,1)";
}
</script>
二、过渡(transition: css过渡样式 过渡时间 运动曲线 开始时间)例如:transition: all 5s linear 2s;
1、transition-property 指定CSS属性的name,transition效果。
2、transition-duration transition效果需要指定多少秒或毫秒才能完成。
3、transition-timing-function 指定transition效果的转速曲线。
4、linear 匀速。
5、ease 规定慢速开始,然后变快,然后慢速结束的过渡效果。
6、ease-in 规定以慢速开始的过渡效果。
7、ease-out 规定以慢速结束的过渡效果。
8、ease-in-out 规定以慢速开始和结束的过渡效果。
9、transition-delay 定义transition效果开始的时候。
三、CSS3动画(要创建 CSS3 动画,你需要了解 @keyframes 规则)
1、animation: 选择器的关键名称 动画时间 运动曲线 开始的时间 播放次数 ,是否反复播放 是否运用最后一帧动画的样式 是否暂停或播放。
示例:
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: red;
animation: move 3s linear 0s 1 normal forwards;
}
@keyframes move{
from{
width: 200px;
background-color: red;
}
to{
width: 500px;
height: 500px;
background-color: orange;
}
}
</style>
<body>
<div class="box1">11111111</div>
</body>
2、animation-name 指定要绑定到选择器的关键帧的名称
3、animation-duration 动画指定需要多少秒或毫秒完成
4、animation-timing-function 设置动画将如何完成一个周期
5 animation-delay 设置动画在启动前的延迟间隔。
6、animation-iteration-count 定义动画的播放次数。
7、animation-direction 指定是否应该轮流反向播放动画。
8、animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
9、animation-play-state 指定动画是否正在运行或已暂停。
示例:
<body>
<button type="button" onclick="func1()">按钮1</button>
<button type="button" onclick="func2()">按钮2</button>
<div class="box1">11111111</div>
</body>
<script type="text/javascript">
var box1= document.getElementsByClassName("box2")[0];
function func1(){
box1.style.animationPlayState ="paused";
}
function func2(){
box1.style.animationPlayState ="running";
}
</script>