验证中...
私信发送成功
语言: CSS
分类: CSS 技巧
最后更新于 2017-11-14 18:58
片段 1 片段 2
3D书
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3D书</title>
<style>
*{margin:0;padding:0;box-sizing: border-box;}
body{background-color: #000;height:100%;display: flex;justify-content: center;align-items: center;/*overflow: hidden;*/}
main{flex-basis:300px;height:400px;perspective:1000px;transform-style:preserve-3d;/*调整观察者观看的位置*/perspective-origin: 50% 80%;}
section{/*旋转基点的更改在子元素上边*/transform-origin:0 0 0;background-color: #f00;opacity:0.8;
position:absolute;color:#fff;width: 100%;height: 100%;/*过渡*/transition:transform 2s;}
section i{position:absolute;right:10px;bottom:10px;}
section:nth-child(1){transform:rotateY(-10deg);background-color: pink;}
section:nth-child(2){background-color: green;transform:rotateY(-25deg);}
section:nth-child(3){background-color: #cff;transform:rotateY(-35deg);}
section:nth-child(4){background-color: gold;transform:rotateY(-50deg);}
section:nth-child(5){background-color: purple;transform:rotateY(-60deg);}
section:nth-child(5):active{transform:rotateY(-120deg);}
</style>
</head>
<body>
<main>
<section><i>4</i></section>
<section><i>3</i></section>
<section><i>2</i></section>
<section><i>1</i>
<h2>引言</h2>
<p>矩阵在图形变换中有广泛的应用,也是图形变换的数学基础。缩放、旋转、倾斜变换只需要使用 2 x 2 矩阵,
如果把平移也加入进来,将得到 2 x 3 矩阵,如果进一步扩充,可以使用一个 3 x 3 的矩阵表示所有的基本2D变换。
多个变换矩阵相乘将得到组合变换的效果。3D变换也可以很方便地用 4 x 4 的矩阵表示。
</p>
<p>在图形变换过程中,普通的几何图形只需要考虑顶点即可。旋转变换时需要使用三角函数。
为了在平面显示器中看到3D效果,还需要使用透视理论。</p>
<span>鸿基梦 编著</span>
</section>
<section><i></i>
<h1>CSS图形变换入门</h1>
<span>鸿基梦</span>
</section>
</main>
</body>
</html>
效果展示.png

评论列表( 0 )

你可以在登录后,对此项目发表评论