本文介绍了CSS3中的空间转换技巧，包括translate进行位移，rotate实现旋转，以及scale执行缩放，通过3D导航案例展示了空间转换的立体效果。同时，文章探讨了CSS3动画的使用步骤、复合属性和拆分属性，并提供了一个精灵图逐帧动画的示例。
目录
一、空间转换
1、空间位移 translate
2、空间旋转 ratate
立体呈现效果
案例——3D导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D导航</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}
.navs {
width: 300px;
height: 40px;
margin: 50px auto;
}
.navs li {
position: relative;
float: left;
width: 100px;
height: 40px;
line-height: 40px;
/* 4 */
transition: all .5s;
transform-style: preserve-3d;
/* 旋转: 让大家在写代码的过程中看到立体盒子 */
/* transform: rotateX(-20deg) rotateY(30deg); */
/* 测试缩放效果 */
/* transform: scale3d(0.5, 1.1, 2); */
}
.navs li a {
position: absolute;
left: 0;
top: 0;
/* 让a的宽高生效 */
display: block;
/* 点击li就能跳转 */
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
color: #fff;
}
.navs li a:first-child {
background-color: green;
/* 3 */
transform: translateZ(20px);
}
.navs li a:last-child {
background-color: orange;
/* 1 躺平x轴旋转 2 立方体的顶部,位移z(确保看到这个盒子) */
transform: rotateX(90deg) translateZ(20px);
}
/* 4 li:hover 立方体旋转 */
.navs li:hover {
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="navs">
<ul>
<li>
<a href="#">首页</a>
<a href="#">Index</a>
</li>
<li>
<a href="#">登录</a>
<a href="#">Login</a>
</li>
<li>
<a href="#">注册</a>
<a href="#">Register</a>
</li>
</ul>
</div>
</body>
</html>3、空间缩放 scale
二、动画 animation
过渡：实现
2个状态间的变化过程
动画：实现
多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
使用步骤
1.定义动画
2.使用动画
动画复合属性
动画拆分属性
案例——精灵图逐帧动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵动画</title>
<style>
.box {
/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
width: 140px;
height: 140px;
/* border: 1px solid #000; */
background-image: url(./images/bg.png);
/* 12: 净零小图的个数 */
animation:
move 1s steps(12) infinite,
run 1s forwards
;
}
@keyframes move {
/* from {
background-position: 0 0;
} */
to {
/* 1680: 精灵图的宽度 */
background-position: -1680px 0;
}
}
/* 定义一个盒子移动的动画 800px */
@keyframes run {
/* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
/* from {
transform: translateX(0);
} */
to {
transform: translateX(800px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
扫一扫
1102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
