一、rotate2d旋转指的是让元素在2维平面内顺时针...
请注意,本文编写于 2106 天前,最后修改于 174 天前,其中某些信息可能已经过时。
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
使用步骤:
transform
rotate(角度)
如 transform:rotate(30deg)
顺时针方向旋转30度div{
transform: rotate(0deg);
}
transform-origin
基础语法:
transform-origin: x y;
重要知识点:
center
center
top
、bottom
、left
、right
、center
)2D
转换之 scale
scale
的作用transform: scale(x, y)
transform: scale(1, 1)
: 宽高都放大一倍,相当于没有放大transform: scale(2, 2)
: 宽和高都放大了二倍transform: scale(2)
: 如果只写了一个参数,第二个参数就和第一个参数一致transform:scale(0.5, 0.5)
: 缩小scale
最大的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子 div:hover {
/* 注意,数字是倍数的含义,所以不需要加单位 */
/* transform: scale(2, 2) */
/* 实现等比缩放,同时修改宽与高 */
/* transform: scale(2) */
/* 小于 1 就等于缩放*/
transform: scale(0.5, 0.5)
}
transform: translate() rotate() scale()
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
CSS3
中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
from
和 to
,等同于 0% 和 100%<style>
div {
width: 100px;
height: 100px;
background-color: aquamarine;
animation-name: move;
animation-duration: 0.5s;
}
@keyframes move{
0% {
transform: translate(0px)
}
100% {
transform: translate(500px, 0)
}
}
</style>
常见的属性
div {
width: 100px;
height: 100px;
background-color: aquamarine;
/* 动画名称 */
animation-name: move;
/* 动画花费时长 */
animation-duration: 2s;
/* 动画速度曲线 */
animation-timing-function: ease-in-out;
/* 动画等待多长时间执行 */
animation-delay: 2s;
/* 规定动画播放次数 infinite: 无限循环 */
animation-iteration-count: infinite;
/* 是否逆行播放 */
animation-direction: alternate;
/* 动画结束之后的状态 */
animation-fill-mode: forwards;
}
div:hover {
/* 规定动画是否暂停或者播放 */
animation-play-state: paused;
}
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
animation-paly-state
animation-paly-state: paused
; 经常和鼠标经过等其他配合使用animation-direction: alternate
animation-fill-mode: forwards
animation: move 2s linear 1s infinite alternate forwards;
animation-timing-function
: 规定动画的速度曲线,默认是ease
div {
width: 0px;
height: 50px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
background-color: aquamarine;
animation: move 4s steps(24) forwards;
}
@keyframes move {
0% {
width: 0px;
}
100% {
width: 480px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #ccc;
}
div {
position: absolute;
width: 200px;
height: 100px;
background: url(media/bear.png) no-repeat;
/* 我们元素可以添加多个动画, 用逗号分隔 */
animation: bear .4s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
/* margin-left: -100px; */
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
----- END -----