14、2D和3D效果

作者: calvinbj | 来源:发表于2019-03-04 11:46 被阅读0次

OpenGL ES基础概念
14、2D和3D效果
Opengl 和 Qml 混合编程
C4D 三维渲平面动画效果
CSS3入门之2D、3D、过度、动画
2D与3D
Canvas绘制地板
Unity 2D和3D混合效果
04-ARKit初体验之2D效果
[译文]信息可视化的感知心理学-3-3D、点阵图、树状图

第一节 2D效果

1、CSS3过渡
2、2D变形

要实现这一点，必须规定两项内容：
1、规定您希望把效果添加到哪个CSS属性上
2、规定效果的时长

比方说，下面这个代码的动画效果，规定了效果的时长为2秒。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box{width: 100px; height: 100px; background: #f00; transition: all 2s; }
        .box:hover {width: 200px; height: 200px; background: #0f0;}
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box{width: 100px; height: 100px; background: #f00; transition-property: width; transition-duration: 2s;}
        .box:hover {width: 200px; height: 200px; background: #0f0;}
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

transition-property: width,height,background; transition-duration: 2s;

上面这一句代码的效果等同于下面这一句：

transition: all 2s;

cubic-bezier(n,n,n,n),贝塞尔曲线取值，可以利用以下网站去参考：
http://cubic-bezier.com/

延迟开始过渡效果。

总体上，transition的几个属性值，可以像以下的代码这样子写，来控制2D效果：

<style type="text/css">
        .box{width: 100px; height: 100px; background: #f00; transition: all 2s linear 1s;}
        .box:hover {width: 200px; height: 200px; background: #0f0;}
</style>

如下示例代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: rotate(30deg);}
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

不加transform前的位置和加了transform：translate（）之后，位置上出现移动。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: translate(100px,100px);}
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

特别注意：元素的缩放中心点是元素的中心位置。

简单例子如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: scale(2,4);}
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: skew(30deg,40deg);}
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: rotate(-30deg);}
        .box2{width: 100px; height: 100px; background: #0f0; margin: 200px auto; transform-origin: left top; transform: rotate(-30deg); }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>

上面的box2是采用transform-origin：left top，对对应的正方形进行元素的中心点设置，之后进行变换的时候，依据这个中心点，进行相应的旋转等一系列变换。

下面这一个是对上面两种变换的进一步的优化，形成2D动画。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transition: all 1s;}
        .box:hover{transform: rotate(-30deg);}
        .box2{width: 100px; height: 100px; background: #0f0; margin: 200px auto; transform-origin: left top; transition: all 1s;}
        .box2:hover{transform: rotate(-30deg); }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>

下面是对整个2D效果的综合案例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div {width: 100px; height: 100px; border: 1px #f00 solid; margin: 100px auto; transition: all 2s;}
        div:nth-child(1):hover {transform:translateX(200px); }
        div:nth-child(2):hover {transform:rotate(90deg); }
        div:nth-child(3):hover {transform:scale(2,0.5); }
        div:nth-child(4):hover {transform:skew(30deg,30deg); }
        div:nth-child(5):hover {transform:translateX(200px) rotate(90deg) scale(2,0.5) skew(30deg,30deg); }
        div:nth-child(6):hover {transform:rotate(90deg) scale(2,0.5) skew(30deg,30deg) translateX(200px) ; }
        div:nth-child(7):hover {transform: scale(2,0.5) rotate(90deg) skew(30deg,30deg) translateX(200px) ; }
    </style>
</head>
<body>
<div>2D平移</div>
<div>2D旋转</div>
<div>2D缩放</div>
<div>2D扭曲</div>
<div>2D综合</div>
<div>2D综合2</div>
<div>2D综合3</div>
</body>
</html>