今天我们来下一个写一个3D立体效果轮播图
先看一下效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3D轮播图</title>
<style>
body {
margin: 0;
padding: 0;
/* 设置flex布局 */
display: flex;
/* 在主轴上居中 */
justify-content: center;
/* 在测轴上居中 */
align-items: center;
height: 100vh;
background-color: #000000;
/* 透视 */
perspective: 900px;
}
section {
width: 3