CSS变形动画
CSS变形动画
前言
在开始介绍CSS变形动画之前，可以先了解一下学习了它之后能做什么，有什么用，这样你看这篇文章可能会有一些动力。
学习了CSS变形动画后，你可以为你的页面做出很多炫酷的效果，如一个3D的魔方，一个很酷的旋转菜单等等。
在本章节中将会采用大量的实例进行演示，相信你如果看完这篇文章后写出的页面会更加的吸引眼球。
基础知识
坐标系统
首先我们要学习的变形动画，想达到在上图中出现的3D效果单纯的X与Y两个轴是实现不了的，还需要加入一条纵深轴，即Y轴的参与才有一个3D的视觉感受。
那么如何来理解X,Y,Z这三条轴的关系呢？可以看一下下面这张图。
X轴代表水平轴
Y轴代表垂直轴
Z轴代表纵深轴
X和Y轴都非常好理解，怎么理解这个Z轴呢？
CSS的中文名称叫做层叠样式表，那么它肯定是一层一层的。之前学习过z-index就是用来设置层的优先级，优先级越高越在上面，也可以理解为离我们肉眼越近，它把优先级低的层给盖住了，所以Z轴可以理解为我们观察的视角与被观察物体之间的一条轴。
Z轴数值越大，说明观测距离越远。
Z轴的数值可以无限大，所以设置的时候一定要小心。
变形操作
可以使用transform规则控制元素的变形操作，包括元素移动、旋转、倾斜、3D转换等等。
下表中是CSS提供的变形动作，在接下来的学习中将会对一个变形动作进行详解。
| 选项 | 说明 |
|---|---|
| none | 定义不进行转换。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x,y) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
变形叠加
这其实是一个坑点，在使用变形中一定要注意，重复对元素设置变形操作时只在元素的原形态上操作。
我们可以先看一下下面的案例，不懂代码没关系，懂这个意思就行了。
默认处理
下面设置了两次移动，并不会移动550px 而是只移动50px。
我们在元素中先设置了右移500px，鼠标放上去时再往右移动50px，可是下面却出现了向左移动的场景，这是因为对div进行了位置居中处理，它必须要按照之前居中的位置进行50px的移动。而不是按照居中后设置的500px的地方再进行向右移动50px。
上面这句话有点绕，总之。上面设置了，位置改变了，下面再设置，不会按照已改变的位置进行变化，而是按照原位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
body {
height: 100vh;
width: 100vw; display: flex;
justify-content: center;
align-items: center;
}
div{
width: 200px;
height: 200px; /* 意思就是说按x轴移动500px */
transform: translateX(500px);
/* 过渡时间2s */
transition: 2s;
}
div:hover{
/* 意思就是说按x轴移动50px */
transform: translateX(50px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
代码示例
伪类叠加
还是设置两次移动，如果移动的方向都一样，且伪类设置的移动比原本的移动多一点，就在原本的基础上直接进行变形，而不用再找开始位置了。
我们还是拿上面的案例，只不过伪类移动的数值将50px改为600px，比第一次设置大100px，那么此时他就不会再往左走，而是直接在原有基础上进行叠加，向右移动100px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
body {
height: 100vh;
width: 100vw; display: flex;
justify-content: center;
align-items: center;
}
div{
width: 200px;
height: 200px; /* 意思就是说按x轴移动500px */
transform: translateX(500px);
/* 过渡时间2s */
transition: 2s;
}
div:hover{
/* 意思就是说按x轴移动600px */
transform: translateX(600px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
代码示例
内联元素
内联元素即行级元素，inline元素是不能参与变形的，将其转为 inline-block 或 block 以及弹性元素时才可以产生变化效果。
:hover伪类
鼠标移动到某一元素上发生的用户行为。
当该行为出现时，我们可以为它指定一些参数的改变。
如下，改变颜色。
:target伪类
意思就是说你点击一个<a>，该<a>标签中的href指向的锚点标签会发生变化。
点击第一个<a>元素，与之相对的锚点元素发生变化。
点击第二个<a>元素，与第一个<a>元素相对的锚点变化停止，与第二个<a>元素相对的锚点发生变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
div{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 2em;
}
div:nth-child(1) {
background:red;
}
div:nth-child(2) {
background:blue;
}
#div-1:target{ }
#div-2:target{ }
</style>
</head>
<body>
<div id="div-1">原本颜色：红</div>
<div id="div-2">原本颜色：蓝</div>
<a href="#div-1">让div-1变绿</a>
<a href="#div-2">让div-2变黑</a>
</body>
</html>
代码示例
最后注意一点
事件元素上放过渡时间，:hover上放具体的事件，如移动，旋转，倾斜等操作。
如果你设置了移动却将过渡时间放在了:hover里面，那么就会出现下面这种情况。
可以看见，直勾勾的就回来了，这种效果显然不是我们想要的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
/* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
}
div:first-child {
height: 8px;
width: 8px;
z-index: 1;
border-radius: 50%;
/* 脱离文档流并居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px;
}
div:last-child {
height: 100px;
width: 100px; /* 过渡时间1s,应该放这里，而不是:hover上面 */
/* transition: 1s; */ }
div:last-child:hover {
transform: translateX(100px);
} </style>
</head>
<body>
<main>
<div></div>
<div></div>
</main>
</body>
</html>
代码示例
移动元素
沿X轴移动时正值向右移动、负值向左移动
沿Y轴移动时正值向下移动、负值向上移动
如果使用百分数将控制元素的原尺寸计算百分比然后移动
可同时设置多个值，解析器会从左向右依次执行
变形是在原基础上更改，即第二次设置值时不是在第一次值上变化
translateX
控制元素在X轴上的移动，正值向右、负值向左。
如，我们下面设置translateX(100px)，过渡时间为1s。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
/* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
}
div:first-child {
height: 8px;
width: 8px;
z-index: 1;
border-radius: 50%;
/* 脱离文档流并居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px;
}
div:last-child {
height: 100px;
width: 100px; /* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; }
div:last-child:hover {
transform: translateX(100px);
} </style>
</head>
<body>
<main>
<div></div>
<div></div>
</main>
</body>
</html>
代码示例
translateY
控制元素在X轴上的移动，正值向下、负值向上。
如，我们下面设置translateY(100px)，过渡时间为1s。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 200px;
height: 400px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
/* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
}
div:first-child {
height: 8px;
width: 8px;
z-index: 1;
border-radius: 50%;
/* 脱离文档流并居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px;
}
div:last-child {
height: 100px;
width: 100px; /* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; }
div:last-child:hover {
transform: translateY(100px);
}
</style>
</head>
<body>
<main>
<div></div>
<div></div>
</main>
</body>
</html>
代码示例
translate
translate是translateX以及translateY的简写模式，第一个值控制X移动，第二个值控制Y移动。
一句话，设置X与Y轴的移动，注意，这个方法中不包含Z轴，因为一旦有Z轴参与就会变为3D效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 400px;
height: 400px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
/* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
}
div:first-child {
height: 8px;
width: 8px;
z-index: 1;
border-radius: 50%;
/* 脱离文档流并居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px;
}
div:last-child {
height: 100px;
width: 100px; /* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; }
div:last-child:hover {
/* 先设置X轴，再设置Y轴 */
transform: translate(100px,100px);
}
</style>
</head>
<body>
<main>
<div></div>
<div></div>
</main>
</body>
</html>
代码示例
百分比移动
当要移动的元素宽高为100px时，如果使用50%进行移动，则代表移动50px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 400px;
height: 400px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
/* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
}
div:first-child {
height: 8px;
width: 8px;
z-index: 1;
border-radius: 50%;
/* 脱离文档流并居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px;
}
div:last-child {
height: 100px;
width: 100px; /* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; }
div:last-child:hover {
/* 先设置X轴，再设置Y轴 */
transform: translate(50%,50%);
}
</style>
</head>
<body>
<main>
<div></div>
<div></div>
</main>
</body>
</html>
代码示例
元素居中
我们之前介绍过很多元素居中的方法，如定位操作，弹性盒模型，其实使用移动也可以达到元素居中的效果。
给你丢一套模板。
/* 让子元素脱离文档流并参照副父级元素偏移。这是定位+margin的居中方法 */
position: absolute;
left: 50%;
top: 50%;
/* left和top设置子元素宽高的负的50%就行 */
margin-left: -3px;
margin-top: -3px;
/* 这是弹性盒模型控制元素居中的方法 */
display: flex;
justify-content: center;
align-items: center;
/* 让子元素脱离文档流并参照副父级元素偏移。这是定位+移动的居中方法 */
position: absolute;
left: 50%;
top: 50%;
/* X和Y设置子元素宽高的负的50%就行 */
transform: translate(-50%, -50%);
translateZ
控制Z轴移动，正数向外（距离我们近）、负数向里移动（距离我们远）。因为Z轴是透视轴没有像X/Y一样的固定尺寸，所以不能使用百分数。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc; /* 如果将Z轴移动的:hover放在div上，我们不方便一直将鼠标放在div上面，故我们设置成放在main上面让div进行Z轴移动 */
/* 为了更好的视觉效果，我们给main容器做一个透视 ,并且让它按照Y轴旋转60度，按Z轴放大5倍*/
transform: perspective(900px) rotateY(60deg) scaleZ(5);
/* 使用 transform-style 用于控制3d透视 */
transform-style: preserve-3d; } main:hover div:nth-child(2) {
transform: translateZ(-100px);
} div {
height: 100px;
width: 100px;
background-color: blueviolet; /* 让子元素脱离文档流并参照副父级元素偏移。这是定位+移动的居中方法 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} div:nth-child(1) {
background-color: yellow; } div:nth-child(2) {
background-color: blueviolet;
/* 过渡时间1s */
transition: 1s;
}
</style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
代码示例
translate3d
用于同时控制X/Y/Z轴的移动，三个值必须输入如果某个轴不需要移动时设置为零。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc; /* 如果将Z轴移动的:hover放在div上，我们不方便一直将鼠标放在div上面，故我们设置成放在main上面让div进行Z轴移动 */
/* 为了更好的视觉效果，我们给main容器做一个透视 ,并且让它按照Y轴旋转60度，按Z轴放大5倍*/
transform: perspective(900px) rotateY(60deg) scaleZ(5);
/* 使用 transform-style 用于控制3d透视 */
transform-style: preserve-3d; } main:hover div:nth-child(2) {
/* 由于Z轴可以无限远，所以不能用百分比 */
transform: translate3d(50%, 50%, 100px);
} div {
height: 100px;
width: 100px;
background-color: blueviolet; /* 让子元素脱离文档流并参照副父级元素偏移。这是定位+移动的居中方法 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} div:nth-child(1) {
background-color: yellow; } div:nth-child(2) {
background-color: blueviolet;
/* 过渡时间1s */
transition: 1s;
}
</style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
代码示例
渐变输入框
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #34495e;
} #form-style-gradient {
width: 200px;
height: 200px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
border: 1px solid #ccc; } #form-style-gradient label input { padding: 10px;
outline: none;
border: none;
background-color: #ecf0f1; } #form-style-gradient label {
width: 80%;
position: relative;
overflow: hidden;
margin-bottom: 20px;
display: flex;
flex-flow: column;
justify-content: center;
align-self: center;
} #form-style-gradient label::before {
content: '';
position: absolute;
/* 移动到最下面 */
left: 0;
bottom: 0; height: 2px;
width: 100%; background: linear-gradient(to right, white, #1abc9c, #f1c40f, #e74c3c, white);
/* 移动到label标签外，然后会被隐藏掉 */
transform: translateX(-100%);
transition: 2s; } #form-style-gradient label:hover::before {
/* 移动回来 */
transform: translateX(100%);
} </style>
</head> <body> <form id="form-style-gradient" action="">
<label>
<input type="text" name="username" placeholder="请输入用户名">
</label>
<label>
<input type="text" name="pwd" placeholder="请输入密码">
</label>
</form> </body> </html>
代码示例
页面切换
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
padding: 0;
margin: 0;
} a {
text-decoration: none;
} body {
display: flex;
width: 100vw;
height: 100vh;
flex-direction: column;
} main {
position: relative;
background: #f3f3f3;
flex: 1;
overflow: hidden;
} nav {
display: flex;
justify-content: space-around;
align-items: center;
height: 8vh;
text-align: center;
background: #34495e;
} nav a {
flex: 1;
font-size: 1.3em;
text-transform: uppercase;
font-weight: bold;
opacity: .8;
color: white;
} nav a:nth-child(2) {
border-right: solid 1px #aaa;
border-left: solid 1px #aaa;
} main>div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all 1s;
z-index: 1;
background: #f3f3f3;
opacity: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translate(0, -100%);
color: white;
font-size: 2em;
} main>div:target {
opacity: 1;
transform: translate(0%, 0%);
} main>div:nth-of-type(1):target {
background: #3498db;
} main>div:nth-of-type(2):target {
background: #9b59b6;
} main>div:nth-of-type(3):target {
background: #16a085;
} div i[class^="fa"] {
font-size: 100px;
color: white;
}
</style>
</head> <body>
<main>
<div id="home">
<i class="fa fa-home" aria-hidden="true"></i>
houdunren.com
</div>
<div id="video">
<i class="fa fa-vimeo" aria-hidden="true"></i>
</div>
<div id="live">
<i class="fa fa-viadeo" aria-hidden="true"></i>
</div>
</main>
<nav>
<a href="#home">home</a>
<a href="#video">video</a>
<a href="#live">live</a>
</nav>
</body> </html>
代码示
缩放元素
比如数值为2时表示为原尺寸的两倍。
数值为.5时为原尺寸的一半。
scaleX
按X轴缩放一半。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div:first-child {
height: 8px;
width: 8px;
background-color: black; z-index: 1;
border-radius: 50%; /* 脱离文档流并居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px; } div:last-child {
height: 100px;
width: 100px;
background-color: blueviolet;
/* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; } div:last-child:hover {
transform: scaleX(.5);
} </style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
代码示例
scaleY
按Y轴缩放一半。
scale
使用 scale 可同时设置 X/Y 轴的缩放，如果只设置一个值时表示两轴缩放相同。
使用数值定义缩放，如 .5 表示缩小一半，2 表示放大两倍。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 200px;
height: 400px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div:first-child {
height: 8px;
width: 8px;
background-color: black; z-index: 1;
border-radius: 50%; /* 脱离文档流并居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px; } div:last-child {
height: 100px;
width: 100px;
background-color: blueviolet;
/* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; } div:last-child:hover {
transform: scale(.5,2);
} </style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
代码示例
scaleZ
沿Z轴缩放元素，需要有3D透视才可以查看到效果。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc; /* 如果将Z轴移动的:hover放在div上，我们不方便一直将鼠标放在div上面，故我们设置成放在main上面让div进行Z轴移动 */
/* 为了更好的视觉效果，我们给main容器做一个透视 ,并且让它按照Y轴旋转60度，按Z轴放大5倍*/
transform: perspective(900px) rotateY(45deg) scaleZ(5);
/* 使用 transform-style 用于控制3d透视 */
transform-style: preserve-3d; } main:hover div:nth-child(2) {
/* 放大5倍 */
transform: scaleZ(5);
} div {
height: 100px;
width: 100px;
background-color: blueviolet; /* 让子元素脱离文档流并参照副父级元素偏移。这是定位+移动的居中方法 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} div:nth-child(1) {
background-color: yellow; } div:nth-child(2) {
background-color: blueviolet;
/* 过渡时间1s */
transition: 1s;
transform: translateZ(100px);
}
</style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
代码示例
scale3d
沿X/Y/Z三个轴缩放元素。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc; /* 如果将Z轴移动的:hover放在div上，我们不方便一直将鼠标放在div上面，故我们设置成放在main上面让div进行Z轴移动 */
/* 为了更好的视觉效果，我们给main容器做一个透视 ,并且让它按照Y轴旋转60度，按Z轴放大5倍*/
transform: perspective(900px) rotateY(45deg) scaleZ(5);
/* 使用 transform-style 用于控制3d透视 */
transform-style: preserve-3d; } main:hover div:nth-child(2) {
/* 放大5倍 */
transform: scale3d(.5,.5,.5);
} div {
height: 100px;
width: 100px;
background-color: blueviolet; /* 让子元素脱离文档流并参照副父级元素偏移。这是定位+移动的居中方法 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} div:nth-child(1) {
background-color: yellow; } div:nth-child(2) {
background-color: blueviolet;
/* 过渡时间1s */
transition: 1s;
transform: translateZ(100px);
}
</style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
代码示例
菜单缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1953712_v8yodek5od.css">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
} body{
height: 100vh;
width: 100vw;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
} main{
width: 100px;
} div i{
display: inline-block;
background: darkgray;
font-size: 30px !important;
display: flex;
justify-content: center;
align-items: center;
} ul{
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
border: 1px solid #ddd;
text-transform: uppercase;
/* 基点设置为左上 */
transform-origin: left top;
/* 鼠标放上去有个小手 */
cursor: pointer;
/* 透明度 */
opacity: .6;
transform: scale(0);
transition: 1s;
} ul>*{
margin: 3px; } main:hover ul{
transform: scale(1); }
</style>
</head>
<body>
<main>
<div>
<i class="iconfont icon-dingbudaohang-zhangh"></i>
</div>
<ul>
<li><a href=""></a>我的资料</li>
<li><a href=""></a>我的关注</li>
<li><a href=""></a>我的收藏</li>
</ul>
</main> </body>
</html>
代码示例
相册放大
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
} body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: deepskyblue;
} img{ height: 100px;
/* 高斯模糊 */
filter: blur(10px);
transform: scale(.6);
transition: .5s;
/* 鼠标小手 */
cursor: pointer;
border: 3px double black;
}
img:hover{
filter: none;
transform: scale(1.3);
} </style>
</head> <body>
<img src="./22.jpg" alt="">
<img src="./33.jpg" alt="">
<img src="./初音.jpg" alt="">
</body> </html>
代码示例
旋转元素
使用CSS可以控制元素按照不同坐标轴进行旋转。
rotateX
控制元素按照X轴进行旋转操作。单位为deg，即°度的意思。
按水平轴发生旋转，如果旋转90deg 将不可见。
正数向上翻，负数向下翻。
如何让他可见呢？我们只需要将父级容器也旋转一下，并加上透视3D效果即可。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用于控制3d透视 */
transform-style: preserve-3d;
/* 为了更好的视觉效果，我们给main容器做一个透视 ,并且让它按照X轴旋转-45度 */
transform: perspective(900px) rotateX(-45deg); /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div {
height: 100px;
width: 150px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; } div:hover {
transform: rotateX(90deg);
} </style>
</head> <body>
<main>
<div>将按照X轴旋转90deg</div>
</main>
</body> </html>
代码示例
rotateY
按垂直轴发生旋转，如果旋转90deg 将不可见。
正数向右翻，负数向左翻。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div {
height: 100px;
width: 150px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; } div:hover {
transform: rotateY(90deg);
} </style>
</head> <body>
<main>
<div>将按照Y轴旋转90deg</div>
</main>
</body> </html>
代码示例
rotateZ
按Z轴旋转元素，效果就是沿X/Y轴的平面旋转。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用于控制3d透视 */
transform-style: preserve-3d;
/* 为了更好的视觉效果，我们给main容器做一个透视 ,并且让它按照X轴旋转-45度 */
transform: perspective(900px) rotateX(-45deg); /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div {
height: 100px;
width: 150px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; } div:hover {
transform: rotateZ(90deg);
} </style>
</head> <body>
<main>
<div>将按照Z轴旋转90deg</div>
</main>
</body> </html>
代码示例
rotate
在X与Y轴平面旋转，效果与使用 rotateZ 相同。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用于控制3d透视 */
transform-style: preserve-3d;
/* 为了更好的视觉效果，我们给main容器做一个透视 ,并且让它按照X轴旋转-45度 */
transform: perspective(900px) rotateX(-45deg); /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div {
height: 100px;
width: 150px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; } div:hover {
transform: rotate(90deg);
} </style>
</head> <body>
<main>
<div>将按照Z轴旋转90deg</div>
</main>
</body> </html>
代码示例
rotate3d
同时设置X/Y/Z轴的旋转向量值来控制元素的旋转。
需要同时设置如下四个参数。
这个是按照向量进行旋转的，比如第四个参数是90deg，那么前三个参数填1就代表各转90°。
rotate3d(tx,ty,tz,angle)
只转X/Y轴
只转Y/Z轴
X/Y/Z都转
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用于控制3d透视 */
transform-style: preserve-3d;
/* 为了更好的视觉效果，我们给main容器做一个透视 ,并且让它按照X轴旋转-45度 */
transform: perspective(900px) rotateX(-45deg); /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div {
height: 100px;
width: 150px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; } div:hover {
/* X/Y/Z */
transform: rotate3d(1,1,1,180deg);
} </style>
</head> <body>
<main>
<div>X/Y/Z 180°</div>
</main>
</body> </html>
代码示例
参数顺序
可以同时设置多个旋转规则，顺序不同结果也会不同。
如下，先按X轴转90，再按Y轴转60
div:hover {
transform: rotateX(90deg) rotate(60deg);
}
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用于控制3d透视 */
transform-style: preserve-3d;
/* 为了更好的视觉效果，我们给main容器做一个透视 ,并且让它按照X轴旋转-45度 */
transform: perspective(900px) rotateX(-45deg); /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div {
height: 100px;
width: 150px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; } div:hover {
transform: rotateX(90deg) rotate(60deg);
} </style>
</head> <body>
<main>
<div>X 90° Y 60°</div>
</main>
</body> </html>
代码示例
旋转文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body{
height: 100vh;
width: 100vw; display: flex;
justify-content: center;
align-items: center; }
main{
width: 100px;
height: 100px; display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
background-color: blueviolet;
} main p{
display: flex;
justify-content: center;
align-items: center;
color: white; } main p span{
width: 50%;
height: 50%;
padding: 5px;
font-size: 1em;
box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
border-radius: 50%;
/* 过渡时间 */
transition: 1s; display: flex;
justify-content: center;
align-items: center;
} main p span:first-of-type{
color: green;
background-color: yellow;
}
main p span:nth-of-type(2){
color: yellow;
background-color: green;
} main p span:nth-of-type(3){
color: white;
background-color: deeppink;
} main p span:last-of-type{
color: red;
background-color: rgb(140, 173, 155);
} main:hover p span:nth-of-type(odd){
transform: rotate(360deg);
} main:hover p span:nth-of-type(even){
transform: rotate(-360deg);
} </style>
</head>
<body>
<main>
<p><span>C</span><span>S</span><span>S</span> <span>3</span></p>
<p>动画</p>
</main>
</body>
</html>
代码示例
电子时钟
这个层级有点多，每个刻度都是一个元素，每个刻度之间距离都是30°，然后再加上3根针就好了。
其实应该分四层，一层做事件驱动，一层做最下面的黑色背景，一层做红色下面的指针，一层做红色。
我就做了三层，所以事件驱动就只能放在<body>上了。
样式有点丑，别介意...
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none; } body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
} main {
height: 400px;
width: 400px;
background-color: #000;
border-radius: 50%; position: relative;
} main div{
height: 5%;
width: 5%;
background-color: green;
border-radius: 50%; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
} main ul:nth-of-type(1) {
height: 80%;
width: 80%;
background-color: red;
border-radius: 50%; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
} main ul:nth-of-type(1) li{ background-color: #fff; position: absolute;
top: 50%;
left: 50%;
/* 全部按照上方开始转 */
transform-origin: top;
transition: 10s; } body:hover main ul:nth-of-type(1) li:nth-child(1){
transform:rotate(360deg)
} main ul:nth-of-type(1) li:nth-child(1){
/* 秒针 */
width: 5px;
height: 46%; } main ul:nth-of-type(1) li:nth-child(2){
/* 分针 */
width: 5px;
height: 40%; transform:rotate(10deg);
} main ul:nth-of-type(1) li:nth-child(3){
/* 分针 */
width: 10px;
height: 30%; transform:rotate(60deg);
} main ul:nth-of-type(2) {
height: 95%;
width: 90%; border-radius: 50%; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1; } main ul:nth-of-type(2) li {
width: 10px;
height: 100%;
background-color: #fff; position: absolute;
top: 50%;
left: 50%;
} main ul:nth-of-type(2) li:nth-child(1) {
/* 由于不会叠加，所以我们需要在每个元素中设置 */
transform: translate(-50%, -50%) rotate(0deg);
} main ul:nth-of-type(2) li:nth-child(2) {
transform: translate(-50%, -50%) rotate(30deg);
} main ul:nth-of-type(2) li:nth-child(3) {
transform: translate(-50%, -50%) rotate(60deg);
} main ul:nth-of-type(2) li:nth-child(4) {
transform: translate(-50%, -50%) rotate(90deg);
} main ul:nth-of-type(2) li:nth-child(5) {
transform: translate(-50%, -50%) rotate(120deg);
} main ul:nth-of-type(2) li:nth-child(6) {
transform: translate(-50%, -50%) rotate(150deg);
}
</style>
</head> <body>
<main>
<!-- 中心点 -->
<div></div> <!-- 红色表盘 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul> <!-- 刻度针 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> </main>
</body> </html>
代码示例
倾斜元素
倾斜元素的单位也是deg，即为度数°。
skewX
按X轴倾斜60deg
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div:first-child {
height: 8px;
width: 8px;
background-color: black; z-index: 1;
border-radius: 50%; /* 脱离文档流并居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px; } div:last-child {
height: 100px;
width: 100px;
background-color: blueviolet;
/* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; } div:last-child:hover {
transform: skewX(60deg);
} </style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
代码示例
skewY
按Y轴倾斜60deg
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 200px;
height: 400px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div:first-child {
height: 8px;
width: 8px;
background-color: black; z-index: 1;
border-radius: 50%; /* 脱离文档流并居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px; } div:last-child {
height: 100px;
width: 100px;
background-color: blueviolet;
/* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; } div:last-child:hover {
transform: skewY(60deg);
} </style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
代码示例
skew
同时设置X/Y轴倾斜操作，不指定第二个参数时Y轴倾斜为零。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 400px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div:first-child {
height: 8px;
width: 8px;
background-color: black; z-index: 1;
border-radius: 50%; /* 脱离文档流并居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px; } div:last-child {
height: 100px;
width: 100px;
background-color: blueviolet;
/* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s; } div:last-child:hover {
transform: skew(60deg, 60deg);
}
</style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
代码示例
按钮特效
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} div { display: flex;
justify-content: center;
align-items: center; padding: 10px 50px;
border: 5px double #ddd;
box-shadow: 0 3px 8px rgba(0, 0, 0, .3); background: #fa7d09;
color: #fff;
cursor: pointer; position: relative;
overflow: hidden;
z-index: 0;
} div::before {
content: "";
background: #679b9b;
height: 100%;
position: absolute;
/* 必须设置宽度，倾斜才会生效 */
width: 0;
align-self: center; transform: skewX(-45deg);
transition: all .8s;
z-index: -1;
} div:hover::before {
width: 200%;
}
</style>
</head> <body> <div>按钮</div> </body> </html>
代码示例
立体按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
a{
width: 100px;
height: 30px;
font-size: 12px;
background: #900d0d;
color: white;
text-align: center;
line-height: 30px;
position: relative;
transform: skew(25deg,0) rotate(-15deg);
}
a::after{
content: "";
background: #900d0d;
height: 100%;
width: 10px;
position:absolute;
left: -10px;
transform: skew(0,-45deg) translate(0,5px); }
a::before{
content: "";
background: #900d0d;
height: 10px;
width: 100%;
position:absolute;
bottom:-10px;
left: 0;
transform: skew(-45deg,0) translate(-5px,0);
}
</style>
</head>
<body>
<a href="javascript:vido(0)">一砖下去可能要命</a>
</body>
</html>
代码示例
变形基点
使用 transform-origin 设置元素的X/YZ操作的基点，用于控制旋转、倾斜等操作。
可以使用百分比，也可使用英文单词进行修改。
百分比是按照变形元素的宽高进行取值。
旋转默认以元素中心进行旋转，改变基点后可控制旋转点位置
元素移动不受变形基点所影响
平面旋转
transform-origin: bottom right;将基点改在右下。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用于控制3d透视 */
transform-style: preserve-3d;
/* 为了更好的视觉效果，我们给main容器做一个透视 ,并且让它按照X轴旋转-45度 */
transform: perspective(900px) rotateX(-45deg); /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div {
height: 100px;
width: 220px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s;
/* 修改基点 */
transform-origin: bottom right; } main:hover div {
transform: rotate(90deg);
} </style>
</head> <body>
<main>
<div>将按照Z轴旋转90deg 基点在右下</div>
</main>
</body> </html>
代码示例
倾斜控制
我们依然按照右下进行倾斜。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div:first-child {
height: 8px;
width: 8px;
background-color: black; z-index: 1;
border-radius: 50%; /* 脱离文档流并居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px; } div:last-child {
height: 100px;
width: 100px;
background-color: blueviolet;
/* 过渡时间1s,应该放这里，而不是:hover上面 */
transition: 1s;
/* 基点改在右下 */
transform-origin: bottom right ;
} div:last-child:hover {
transform: skewX(60deg);
} </style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
代码示例
三维旋转
三维旋转需要新增Y轴的基点，还是老规矩，Y轴的基点不能使用百分比。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用于控制3d透视 */
transform-style: preserve-3d;
/* 为了更好的视觉效果，我们给main容器做一个透视 ,并且让它按照X轴旋转-45度 */
transform: perspective(900px) rotateX(-45deg); /* 为了设置第一个div的中心点，所以这里设置一个定位，让子元素的绝对定位参照该元素进行偏移 */
position: relative;
} div {
height: 100px;
width: 210px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 过渡时间2s,应该放这里，而不是:hover上面 */
transition: 2s;
/* 基点 */
transform-origin: right center 100px; } main:hover div {
/* X/Y/Z */
transform: rotate3d(1,1,1,720deg);
} </style>
</head> <body>
<main>
<div>X right/Y center/Z 100px 720°</div>
</main>
</body> </html>
代码示例
新年贺卡
使用变形基点，然后加上旋转元素即可。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} div {
width: 200px;
height: 150px;
background: #fa7d09; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 25px;
position: relative;
transform-style: preserve-3d;
transform: perspective(600px) rotateX(35deg) rotateY(15deg);
} div:after {
content: "新年";
height: 100%;
width: 50%;
position: absolute;
background-color: #fa1616;
left: 0;
transition: 1s;
transform-origin: center left; display: flex;
justify-content: flex-end;
align-items: center; } div:before {
content: "快乐";
height: 100%;
width: 50%;
position: absolute;
background-color: #fa1616;
right: 0;
transition: 1s;
transform-origin: center right; display: flex;
justify-content: flex-start;
align-items: center; } div:hover::before{
transform: rotateY(180deg);
} div:hover::after{
transform: rotateY(-180deg);
} </style>
</head> <body>
<div>祝你年年有余</div>
</body> </html>
代码示例
动感菜单
这个应该是最难的一个了，那么首先我们要有一个大圆。
鼠标放上去之后所有的小圆跟随大圆的中心点旋转转出来，然后小圆也进行旋转，围绕自身的中心点。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1953712_b2p42vds2na.css">
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} body { display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
} nav {
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer; }
nav::before{
content:"";
background: #e74c3c;
border-radius: 50%; width: 200px;
height: 200px; position: absolute;
box-shadow: 3px 3px 0px #34495e;
} nav::after{
content:"点我";
background: #e74c3c;
border-radius: 50%; width: 200px;
height: 200px;
display: flex; justify-content: center;
align-items: center;
position: absolute;
font-size: 3em;
color: #fff; } nav:hover ul{
transform: scale(1);
} ul {
transition: .5s;
transform: scale(0);
width: 300px;
height: 300px; border-radius: 50%; } ul li { width: 80px;
height: 80px;
background: #e49;
border-radius: 50%; position: absolute;
display: flex;
justify-content: center;
align-items: center; font-size: 2em;
color: #fff; transition: 1s;
transform-origin: 150px 150px; } ul li span{
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
} ul li span i{
font-size: 1.6em !important;
} nav:hover li:nth-of-type(1) {
transform: rotate(60deg);
} nav:hover li:nth-of-type(2) {
transform: rotate(120deg);
} nav:hover li:nth-of-type(3) {
transform: rotate(180deg);
} nav:hover li:nth-of-type(4) {
transform: rotate(240deg);
} nav:hover li:nth-of-type(5) {
transform: rotate(300deg);
} nav:hover li:nth-of-type(6) {
transform: rotate(360deg);
} /* 解决小图标倾斜 */
nav:hover li:nth-of-type(1) span {
transform: rotate(300deg);
} nav:hover li:nth-of-type(2) span {
transform: rotate(600deg);
} nav:hover li:nth-of-type(3) span {
transform: rotate(900deg);
} nav:hover li:nth-of-type(4) span {
transform: rotate(1200deg);
} nav:hover li:nth-of-type(5) span {
transform: rotate(1500deg);
} nav:hover li:nth-of-type(6) span {
transform: rotate(1800deg);
}
</style>
</head> <body> <nav>
<ul>
<li><span><i class="iconfont icon-dianhua"></i></span></li>
<li><span><i class="iconfont icon-dingbudaohang-zhangh"></i></span></li>
<li><span><i class="iconfont icon-shezhi"></i></span></li>
<li><span><i class="iconfont icon-lianxiren"></i></span></li>
<li><span><i class="iconfont icon-shoucang"></i></span></li>
<li><span><i class="iconfont icon-ziliao"></i></span></li>
</ul>
</nav> </body> </html>
代码示例
透视景深
perspective
使用 perspective 来控制元素的透视景深
perspective 规则为舞台元素控制景深， perspective 属性为控制单个元素
舞台透视
perspective 规则用于将父级整个做为透视元素，会造成里面的每个子元素的透视是不一样的。就像现实中摆一排杯子，是使用统一透视的，每个杯子的透视不一样，造成有大有小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} body { display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
} main{
width: 400px;
height: 200px;
/* 给整个台子做透视 */
perspective:200px ;
position: relative;
border: solid 5px silver; display: flex;
justify-content: center;
align-items: center;
} main div{
width: 50%;
height: 50%;
background-color: blueviolet;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
margin: 20px; transform: rotateY(60deg);
} </style>
</head>
<body>
<main>
<div>车1</div>
<div>车2</div>
</main>
</body>
</html>
代码示例
单独透视
perspective 函数用于为元素设置单独透视，下面是为元素单独设置透视参数，每个元素的透视效果是一样的。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} body { display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
} main {
width: 400px;
height: 200px; position: relative;
border: solid 5px silver; display: flex;
justify-content: center;
align-items: center;
} main div {
width: 50%;
height: 50%;
background-color: blueviolet;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
margin: 20px; /* 给每个车做透视，现在每辆车都以相同的角度对着你 */
transform: perspective(100px) rotateY(60deg);
} </style>
</head> <body>
<main>
<div>车1</div>
<div>车2</div>
</main>
</body> </html>
代码示例
立方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
} body {
background: #34495e;
} main {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform-origin: 50% 50% 50px;
transform: translate(-50%, -50%) rotateY(0deg);
transition: 2s;
} main:hover {
transform: translate(-50%, -50%) rotate3d(1, 1, 0, 180deg);
} div {
position: absolute;
width: 200px;
height: 200px;
background: #000;
display: flex;
justify-content: center;
align-items: center;
font-size: 4em;
} div:nth-child(1) {
transform-origin: right;
background: #1abc9c;
transform-origin: bottom;
transform: translateY(-200px) rotateX(-90deg);
opacity: .8;
} div:nth-child(2) {
transform-origin: right;
background: #27ae60;
transform-origin: top;
transform: translateY(200px) rotateX(90deg);
opacity: .8;
} div:nth-child(3) {
transform-origin: bottom;
background: #e67e22;
transform-origin: right;
transform: translateX(-200px) rotateY(90deg);
opacity: .8;
} div:nth-child(4) {
transform-origin: top;
background: #8e44ad;
transform-origin: left;
transform: translateX(200px) rotateY(-90deg);
opacity: .8;
} div:nth-child(5) {
transform-origin: left bottom;
background: #ecf0f1;
opacity: .8;
} div:nth-child(6) {
transform-origin: left bottom;
background: #ecf0f1;
opacity: .5;
transform: translateZ(200px);
} </style>
</head>
<body> <main>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</main> </body>
</html>
代码示例
3D透视
transform-style
使用 transform-style 用于控制3d透视。
应用于舞台即变形元素的父级元素
设置
overflow:visible时preserve-3d才无效
| 选项 | 说明 |
|---|---|
| flat | 2D平面舞台 |
| preserve-3d | 3D透视舞台 |
三维图集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: #34495e;
} main {
position: absolute;
width: 400px;
height: 200px;
left: 50%;
top: 50%;
transform-style: preserve-3d;
transform-origin: center center -300px;
transform: translate(-50%, -50%) rotateX(-45deg);
transition: 2s;
} body:hover main {
transform: translate(-50%, -50%) rotateX(-45deg) rotateY(900deg);
} div {
position: absolute;
width: 100%;
height: 100%;
transform-origin: center center -300px;
overflow: hidden;
background: content-box;
padding: 10px;
opacity: .5;
} div:nth-child(1) {
background-color: #ade498;
transform: rotateY(60deg);
} div:nth-child(2) {
background-color: #d3de32;
transform: rotateY(120deg);
} div:nth-child(3) {
background-color: #ffffdd;
transform: rotateY(180deg);
} div:nth-child(4) {
background-color: #006a71;
transform: rotateY(240deg);
} div:nth-child(5) {
background-color: #fe91ca;
transform: rotateY(300deg);
} div:nth-child(6) {
background-color: #cffe0f;
transform: rotateY(360deg);
}
</style>
</head>
<body>
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
</body>
</html>
代码示例
观看视角
perspective-origin
perspective-origin用于控制视线的落点，就像我们眼睛看物体时的聚焦点。可以理解眼镜看物体的位置，比如看一台汽车，是在看车头左边看还是车头右边看。
需要设置 perspective 透视后才可以看到效果。
一般设置在舞台元素上来控制子元素
| 取值 | 说明 |
|---|---|
| x-axis | 定义该视图在 x 轴上的位置。默认值：50%。可能的值：left、center、right、length、% |
| y-axis | 定义该视图在 y 轴上的位置。默认值：50%。可能的值：top、center、bottom、length、% |
隐藏背面
backface-visibility
使用 backface-visibility 用于控制是否可以看到元素的背面。
一般设置在元素上而不是舞台元素上
需要舞台元素（父级元素）设置 transform-style: preserve-3d
| 选项 | 说明 |
|---|---|
| visible | 背面可见 |
| hidden | 背面隐藏 |
翻转卡片
下面使用隐藏背面与透视技术制作的翻转卡片效果。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
} main {
position: absolute;
width: 100vw;
height: 100vh;
transition: 2s;
transform-style: preserve-3d;
} main.login {
transform: perspective(900px) rotateY(0deg);
} main.register {
transform: perspective(900px) rotateY(180deg);
} div {
position: absolute;
width: 100%;
height: 100%;
font-size: 5em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
backface-visibility: hidden;
transition: 2s;
text-transform: uppercase;
color: white;
} div span {
text-transform: lowercase;
letter-spacing: .2em;
font-size: .2em;
color: #2c3e50;
} div:nth-child(1) {
background: #2ecc71;
transform: rotateY(0deg);
} div:nth-child(2) {
background: #e74c3c;
transform: rotateY(180deg);
} nav {
position: absolute;
width: 100%;
height: 100%;
z-index: 99;
text-align: center;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 30px;
} nav a {
padding: 10px;
text-decoration: none;
font-size: 1em;
background: #000;
color: white;
margin-right: 10px;
cursor: pointer;
left: 0;
top: 0;
}
</style>
</head> <body>
<main>
<div>
<i class="fa fa-home" aria-hidden="true"></i>
login
<span>houdunren.com</span>
</div>
<div>
<i class="fa fa-user" aria-hidden="true"></i>
register
<span>houdunren.com</span>
</div>
</main>
<nav>
<a href="javascript:;" onclick="change('login')">登录</a>
<a href="javascript:;" onclick="change('register')">注册</a>
</nav>
</body> <script>
function change(t) {
switch (t) {
case 'login':
$("main").removeClass().addClass('login');
break;
case 'register':
$("main").removeClass().addClass('register');
break;
}
}
</script> </html>
代码示例
CSS变形动画的更多相关文章
- 深入理解CSS变形transform(2d)
× 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...
- 第四十二课：基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- 用CSS变形创建圆形导航
http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html 本文由陈毅根据SARA SOUE ...
- Effeckt.css项目：CSS交互动画应用集锦
目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...
- Unity插件 - MeshEditor（七）变形动画骨骼及蒙皮
MeshAnimation在物体的顶点比较多的情况下,悲剧是显而可见的,我一个一个的点选顶点肯定得累死,而且对于形态的调控不是很方便,应该说是很麻烦,要知道,骨骼动画因为有了骨骼以及蒙皮信息而有了灵魂 ...
- Unity插件 - MeshEditor（六） 变形动画状态机
变形动画状态机--MeshAnimator,是针对MeshAnimation的状态管理器,有大量类似Unity animator的功能,但MeshAnimator操作会更加简便,更加直观,居家旅(zh ...
- Unity插件 - MeshEditor（五） 网格顶点动画（变形动画）
源码已上传至github,并持续更新,链接请看底部.(本帖跟随github持续更新) 网格顶点动画(变形动画)是针对于物体的形状可以随意变换并记录为关键帧的动画,虽然模型的顶点数据还是应该交给GPU绘 ...
- CSS变形transform(2d)
前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
随机推荐
- docker配置国内镜像地址，解决无法pull镜像问题docker: Error response from daemon
问题: 执行命令 $ docker run -it --rm -p 8888:8080 tomcat:8.5.32 报错 Unable to find image 'tomcat:8.5.32' lo ...
- skywalking7 源码解析 (3) ：agent启动服务分析以及性能影响
skywalking必看的文章,转载自https://blog.csdn.net/u010928589/article/details/106608864/
- 2、尚硅谷_SSM高级整合_使用ajax操作实现页面的查询功能
16.尚硅谷_SSM高级整合_查询_返回分页的json数据.avi 在上一章节的操作中我们是将PageInfo对象存储在request域中,然后list页面解析request域中的对象实现信息的显示. ...
- PHP输入流
PHP输入流php://input,对于这个的官方解释是: php://input可以读取没有处理过的POST数据.相较于$HTTP_RAW_POST_DATA而言,它给内存带来的压力较小,并且不需要 ...
- 入门大数据---HDFS-HA搭建
一.简述 上一篇了解了Zookeeper和HDFS的一些概念,今天就带大家从头到尾搭建一下,其中遇到的一些坑也顺便记录下. 1.1 搭建的拓扑图如下: 1.2 部署环境:Centos3.1,java1 ...
- 新手安装配置git简洁教程
第一步,下载安装git 打开 [git官网] https://git-scm.com/,下载git对应操作系统的版本. 所有东西下载慢的话就可以去找镜像!官网下载太慢,我们可以使用淘宝镜像下载:htt ...
- 从零开始实现ASP.NET Core MVC的插件式开发(八) - Razor视图相关问题及解决方案
标题:从零开始实现ASP.NET Core MVC的插件式开发(八) - Razor视图相关问题及解决方案 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun ...
- C#判断某元素是否存在数组中
string s = "K2:CENTALINE\\lukshing|K2:CENTALINE"; string[] s1 = s.Split('|'); //判断方式是 等于 而 ...
- P2629 【好消息，坏消息】
其实刚开始看到这道题,应该很多都会想到区间DP中的合并石子,开一个2倍的空间(严格来说的话应该是2n-1),将本来的环变成一个链式的结构.然后对于得到的消息,可以预处理一个前缀和,这样就可以很方便的知 ...
- 每日一题 - 剑指 Offer 42. 连续子数组的最大和
题目信息 时间: 2019-06-30 题目链接:Leetcode tag: 动态规划 难易程度:简单 题目描述: 输入一个整型数组,数组里有正数也有负数.数组中的一个或连续多个整数组成一个子数组.求 ...