旋转木马案例
设计原理:
采用子绝父相、动画、3D旋转的知识
因为要做到旋转木马的效果:那么们可以利用到6张图片,这样每张图片平均60度,
注意事项
- 做到3D的立体效果,记得在父元素上加上透视
- 子孩子作了旋转之后,记得在父盒子里保留立体空间
- 要达到旋转木马的效果,必定要加上动画
代码示例
<!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>旋转木马案例</title>
<style>
body {
perspective: 1000px;
}
.box {
position: relative;
width: 400px;
height: 300px;
margin: 200px auto;
/* 保留3D空间 */
transform-style: preserve-3d;
/* 调用动画 */
animation: rotate 1