css3-transform三维变换

作者: AssertDo | 来源:发表于2019-08-27 10:21 被阅读0次

css3-transform三维变换
OpenGL ES 2.0 (iOS)[02]：修复三角形的显示
几何变换
三维变换
OpenGLES学习之路-三维变换
线性代数的本质（笔记2）
三维变换与投影
线性代数的本质——笔记4
Three.js Sprite 精灵 shader 原理
OpenCV-15投影与三维视觉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 200px;
            margin-top:10px;
            /*添加过渡*/
            transition: transform 2s;
        }
        /*添加三维移动--3D移动*/
        div:first-of-type:active{
            /*translate3d(X方向的偏移，Y方向的偏移，Z方向的偏移)*/
            /*transform: translate3d(400px,0,0);*/
            /*transform: translate3d(400px,400px,0);*/
            transform: translate3d(0px,0px,400px);
        }
        /*添加三维缩放*/
        div:nth-of-type(2):active{
            /*scale3d(x方向上的缩放，y方向的缩放，z方向的缩放)
            >1.01 放大   <0.99 缩小*/
            /*transform:scale3d(2,0.5,10);*/
            transform:scale3d(1,1,10);
        }
        /*添加三维旋转*/
        div:nth-of-type(3):active{
            /*rotate3d(x,y,z,angle):
            x:代表x轴方向上的一个向量值
            y:代表y轴方向上的一个向量值
            z:代表z轴方向上的一个向量值*/
            transform: rotate3d(1,1,1,330deg);
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>