2D3D转换

最新推荐文章于 2023-09-10 00:01:40 发布
最新推荐文章于 2023-09-10 00:01:40 发布
阅读量710 收藏 3
点赞数 3
分类专栏： CSS3 文章标签： css3 html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DGL_CSDN/article/details/120009672
版权

1 2D转换

转换是 CSS3 中具有颠覆性的⼀个特征，可以实现元素的位移、旋转、变形、缩放。

通过 transform 转换来实现 2D 转换或者 3D 转换。

2D转换包括：

  • 缩放

  • 移动

  • 旋转

  • 倾斜

1.1 scale

设置元素的缩放效果

语法：

  • transform: scale(x, y);

  • transform: scale(2, 0.5);

参数：

  • x：表示水平方向的缩放倍数

  • y：表示垂直方向的缩放倍数

注意：如果只写⼀个值就是等比例缩放

取值：

  • ⼤于1表示放⼤

  • ⼩于1表示缩⼩

  • 不能为百分⽐

给元素设置 2D 转换，并不会把兄弟元素挤⾛

<style>
    .box {
        float: left;
        width: 200px;
        height: 200px;
    }
​
    .box1 {
        transform: scale(1.2);
        background: #ff0000;
    }
​
    .box2 {
        background: #00ff00;
    }
</style>
<div class="box box1"></div>
<div class="box box2"></div>

1.2 translate

设置元素的移动效果

语法：

  • transform: translate(⽔平位移, 垂直位移);

  • transform: translate(-50%, -50%);

参数：

  • 参数为百分⽐，相对于⾃身移动

  • 正值：向右和向下

  • 负值：向左和向上

  • 如果只写⼀个值，则表示⽔平移动

注意：与相对定位相⽐，效果是⼀样的，但是相对定位会影响⼦元素的定位参考。

使用：让绝对定位中的盒⼦在父元素里居中，我们知道，如果想让⼀个标准流中的盒⼦在⽗盒⼦⾥居中（⽔平⽅向看），可以将其设置margin: 0 auto; 属性。

如果盒⼦是绝对定位的，如果还想让其居中（位于⽗盒⼦的正中间），之前的做法是利用 margin 负值

<style>
    .wrapper {
        float: left;
        width: 600px;
        height: 600px;
        background: #0000ff;
        position: relative;
    }
​
    .box {
        float: left;
        width: 200px;
        height: 200px;
    }
​
    .box1 {
        background: #ff0000;
        margin: -100px 0 0 -100px;
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 9;
    }
</style>
<div class="wrapper">
    <div class="box box1"></div>
</div>

现在，我们还可以利⽤ translate 偏移来做，这也是⽐较推荐的写法

<style>
    .wrapper {
        float: left;
        width: 600px;
        height: 600px;
        background: #0000ff;
        position: relative;
    }
​
    .box {
        float: left;
        width: 200px;
        height: 200px;
    }
​
    .box1 {
        background: #ff0000;
        transform: translate(-50%, -50%);
        position: absolute;
        left: 50%;
        top: 50%; 
        z-index: 9;
    }
</style>
<div class="wrapper">
    <div class="box box1"></div>
</div>

1.3 rotate

设置元素的旋转

语法：

  • transform: rotate(⻆度);

  • transform: rotate(45deg);

参数：

  • 单位是deg

  • 正值：顺时针旋转

  • 负值：逆时针旋转

<style>
    .rotate {
        width: 100px;
        height: 100px;
        background: #000fff;
    }
​
    .rotate:hover {
        transform: rotate(45deg);
    }
</style>
<div class="rotate"></div>

transform 可以书写多个 2D 转换，中间⽤空格隔开。我们可以将 transform 的两个属性合并起来写

<style>
    .rotate {
        width: 100px;
        height: 100px;
    }
​
    .rotate1 {
        background: #000fff;
    }
​
    .rotate2 {
        background: #00ff00;
    }
​
    .rotate1:hover {
        transform: translate(200px) rotate(45deg);
    }
​
    .rotate2:hover {
        transform: rotate(45deg) translate(200px);
    }
</style>
<div class="rotate rotate1"></div>
<div class="rotate rotate2"></div>

但是这两者效果不同，第⼀种是先平移再旋转，第⼆种是先旋转再平移。

rotate 旋转时，默认是以盒⼦的正中⼼为坐标原点的。如果想改变旋转的坐标原点，可以⽤ transform-origin 属性

取值：

  • px

  • 百分⽐

  • 英⽂单词（left、center等）

语法：

  • transform-origin: ⽔平坐标 垂直坐标;

  • transform-origin: 50px 50px;

  • transform-origin: center bottom;

实现扑克牌效果

<style>
    .box {
        width: 300px;
        height: 440px;
        margin: 100px auto;
        position: relative;
    }
​
    .item {
        width: 100%;
        height: 100%;
        border: 1px solid #fff000;
        position: absolute;
        left: 0;
        top: 0;
        /* 变换中心原点 */
        transform-origin: center bottom;
    }
​
    .box:hover .item:nth-child(6) {
        transform: rotate(-10deg);
    }
​
    .box:hover .item:nth-child(5) {
        transform: rotate(-20deg);
    }
​
    .box:hover .item:nth-child(4) {
        transform: rotate(-30deg);
    }
​
    .box:hover .item:nth-child(3) {
        transform: rotate(-40deg);
    }
​
    .box:hover .item:nth-child(2) {
        transform: rotate(-50deg);
    }
​
    .box:hover .item:nth-child(1) {
        transform: rotate(-60deg);
    }
​
    .box:hover .item:nth-child(8) {
        transform: rotate(10deg);
    }
​
    .box:hover .item:nth-child(9) {
        transform: rotate(20deg);
    }
​
    .box:hover .item:nth-child(10) {
        transform: rotate(30deg);
    }
​
    .box:hover .item:nth-child(11) {
        transform: rotate(40deg);
    }
​
    .box:hover .item:nth-child(12) {
        transform: rotate(50deg);
    }
​
    .box:hover .item:nth-child(13) {
        transform: rotate(60deg);
    }
</style>
​
<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

实现红心效果

<style>
    .heart {
        position: relative;
        width: 100px;
        height: 100px;
        margin-top: 80px;
    }
​
    .heart:before,
    .heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: red;
        border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
        transform-origin: 0 100%;
    }
​
    .heart:after {
        left: 0;
        transform: rotate(45deg);
        transform-origin: 100% 100%;
    }
​
    .heart:hover {
        transform: scale(1.2);
    }
</style>
<div class="heart"></div>

1.4 skew

设置元素的倾斜

语法：

  • transform: skew(⽔平倾斜⻆度，垂直倾斜⻆度);

  • transform: skew(45deg,10deg);

参数：

  • 单位是deg

  • 正值：顺时针倾斜

  • 负值：逆时针倾斜

<style>
    .skew {
        width: 100px;
        height: 100px;
        background: #000fff;
    }
​
    .skew:hover {
        transform: skew(45deg, 10deg);
    }
</style>
<div class="skew"></div>

注意：

  • 转换操作不会影响到其他元素

  • 只能添加给块元素或行内块元素，不能添加给⾏内元素

  • 复合写法：可以同时添加多个变形操作，先执⾏前⾯的，再执⾏后⾯的

2 3D转换

2.1 缩放

2.1.1 scaleX

元素沿着 X 轴缩放

语法：

  • transform: scaleX(x);

  • transform: scaleX(1.2);

参数：

  • x：表示水平方向的缩放倍数

取值：

  • ⼤于1表示放⼤

  • ⼩于1表示缩⼩

  • 不能为百分⽐

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
	}

	.box>.fill {
        height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.scaleX:hover .fill {
		transform: scaleX(2);
	}
</style>
<div class="box scaleX">
	<div class="fill"></div>
</div>

2.1.2 scaleY

元素沿着 Y 轴缩放

语法：

  • transform: scaleY(y);

  • transform: scaleY(1.2);

参数：

  • y：表示垂直方向的缩放倍数

取值：

  • ⼤于1表示放⼤

  • ⼩于1表示缩⼩

  • 不能为百分⽐

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
	}

	.box>.fill {
        height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.scaleY:hover .fill {
		transform: scaleY(2);
	}
</style>
<div class="box scaleY">
	<div class="fill"></div>
</div>

2.1.3 scaleZ

元素沿着 Z 轴缩放

语法：

  • transform: scaleZ(z);

  • transform: scaleZ(1.2);

参数：

  • z：表示面向屏幕方向的缩放倍数

取值：

  • ⼤于1表示放⼤

  • ⼩于1表示缩⼩

  • 不能为百分⽐

2.1.4 scale3d

设置元素的 3D 缩放效果

语法：

  • transform: scale3d(x,y,z);

  • transform: scale3d(2,2,2);

参数：

  • x：表示水平方向的缩放倍数

  • y：表示垂直方向的缩放倍数

  • z：表示面向屏幕方向的缩放倍数

取值：

  • ⼤于1表示放⼤

  • ⼩于1表示缩⼩

  • 不能为百分⽐

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        perspective: 800px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.scale3d:hover .fill {
		transform: scale3d(2, 2, 1);
	}
</style>
<div class="box scale3d">
	<div class="fill"></div>
</div>

2.2 移动

2.2.1 translateX

元素沿着 X 轴移动

语法：

  • transform: translateX(x);

  • transform: translateX(100px);

参数：

  • x：表示水平方向的移动

取值：

  • 正值：向右

  • 负值：向左

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        perspective: 800px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.translateX:hover .fill {
		transform: translateX(50px);
	}
</style>
<div class="box translateX">
	<div class="fill"></div>
</div>

2.2.2 translateY

元素沿着 Y 轴移动

语法：

  • transform: translateY(y);

  • transform: translateY(100px);

参数：

  • y：表示垂直方向的移动

取值：

  • 正值：向下

  • 负值：向上

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        perspective: 800px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.translateY:hover .fill {
		transform: translateY(50px);
	}
</style>
<div class="box translateY">
	<div class="fill"></div>
</div>

2.2.3 translateZ

元素沿着 Z 轴移动

语法：

  • transform: translateZ(z);

  • transform: translateZ(100px);

参数：

  • z：表示面向屏幕方向的移动

取值：

  • 正值：向前

  • 负值：向后

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        /* ⽗元素加透视效果 */
        perspective: 800px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.translateZ:hover .fill {
		transform: translateZ(200px);
	}
</style>
<div class="box translateZ">
	<div class="fill"></div>
</div>

如果不加透视属性，是看不到 translateZ 的效果的。

2.2.4 translate3d

元素进行 3D 移动

语法：

  • transform: translate3d(x,y,z);

  • transform: translate3d(100px,100px,100px);

参数：

  • x：表示水平方向的移动

  • y：表示垂直方向的移动

  • z：表示面向屏幕方向的移动

取值：

  • 正值：向右、向下、向前

  • 负值：向左、向上、向后

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
		/* ⽗元素加透视效果 */
		perspective: 800px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.translate3d:hover .fill {
		transform: translate3d(50px, 50px, 200px);
	}
</style>
<div class="box translate3d">
	<div class="fill"></div>
</div>

2.3 旋转

旋转的方向：（左⼿法则）左⼿握住旋转轴，竖起拇指指向旋转轴的正⽅向，正向就是其余⼿指卷曲的⽅向。

注意：所有的3d旋转，对着正⽅向去看，都是顺时针旋转。

2.3.1 rotateX

元素沿着 X 轴旋转

语法：

  • transform: rotateX(a);

  • transform: rotateX(360deg);

参数：

  • a：角度，单位为deg

取值：

  • 正值：顺时针旋转

  • 负值：逆时针旋转

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        /* ⽗元素加透视效果 */
		perspective: 200px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.rotateX:hover .fill {
		transform: rotateX(45deg);
	}
</style>
<div class="box rotateX">
	<div class="fill"></div>
</div>

透视的是要加给图⽚的⽗元素 div，⽅能⽣效。我们在后⾯会讲解透视属性。

2.3.2 rotateY

元素沿着 Y 轴旋转

语法：

  • transform: rotateY(a);

  • transform: rotateY(360deg);

参数：

  • a：角度，单位为deg

取值：

  • 正值：顺时针旋转

  • 负值：逆时针旋转

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
		/* ⽗元素加透视效果 */
		perspective: 200px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.rotateY:hover .fill {
		transform: rotateY(45deg);
	}
</style>
<div class="box rotateY">
	<div class="fill"></div>
</div>

2.3.3 rotateZ

元素沿着 Z 轴旋转

语法：

  • transform: rotateZ(a);

  • transform: rotateZ(360deg);

参数：

  • a：角度，单位为deg

取值：

  • 正值：顺时针旋转

  • 负值：逆时针旋转

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        /* ⽗元素加透视效果 */
		perspective: 200px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.rotateZ:hover .fill {
		transform: rotateZ(45deg);
	}
</style>
<div class="box rotateZ">
	<div class="fill"></div>
</div>

2.3.4 rotate3d

沿着自定义轴，元素 3D 旋转，综合写法

语法：

  • transform: rotate3d(1, 1, 1, 0);

  • transform: rotate3d(x, y, z, a)

取值：

  • x 表示旋转轴X坐标方向的矢量。

  • y 表示旋转轴Y坐标方向的矢量。

  • z 表示旋转轴Z坐标方向的矢量。

  • a 表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
		/* ⽗元素加透视效果 */
		perspective: 200px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.rotate3d1 .fill {
		transform: rotate3d(1, 1, 0, 45deg);
	}

    .rotate3d2 .fill {
		transform: rotate3d(-1, 1, 0, 45deg);
	}
</style>
<div class="box rotate3d1">
	<div class="fill"></div>
</div>
<div class="box rotate3d2">
	<div class="fill"></div>
</div>

2.3.5 3D旋转

<style>
	.box {
		width: 300px;
		height: 300px;
		margin: 50px auto;
		position: relative;
	}

	.box-item {
		width: 100%;
		height: 100%;
		position: absolute;
		border-radius: 50%;
		transition: all 2s;
        /* 隐藏背面 */
		backface-visibility: hidden;
	}

	.box1 {
		background: #ff0000
	}

	.box2 {
		background: #0000ff;
		transform: rotateY(180deg);
	}

	.box:hover .box1 {
		transform: rotateY(180deg);
	}

	.box:hover .box2 {
		transform: rotateY(0deg);
	}
</style>
<div class="box">
	<div class="box-item box1"></div>
	<div class="box-item box2"></div>
</div>

2.4 透视

显示屏是⼀个 2D 平⾯，图像之所以具有⽴体感（3D效果），其实只是⼀种视觉呈现，通过透视可以 实现此⽬的。

透视可以将⼀个2D平⾯，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真 的3d。

简单来说，就是设置这个属性后，那么就可以模拟出像我们人看电脑上的显示的元素一样。比如说，perspective:800px; 意思就是，我在离屏幕 800px 的地方观看这个元素。(这个属性，要设置在父元素上面)

加了perspective 和 没有加是什么区别， 第一个小方块，是有加的效果，能明显的看到空间感了有没有， 感觉他是真的像在旋转， 而第二个呢，像是在伸缩。

<style>
	.wrapper1 {
		/* 透视：加给变换的⽗盒⼦ */
		/* 设置的是⽤户的眼睛距离 平⾯的距离 */
		/* 透视效果只是视觉上的呈现，并不是正真的3d */
		perspective: 400px;
	}

	.box {
		width: 300px;
		height: 220px;
		margin: 100px auto 0;
		background: #ff0000;
		transition: all 2s;
	}

	.box:hover {
		transform: rotateY(180deg);
	}
</style>
<div class="wrapper1">
	<div class="box"></div>
</div>
<div class="wrapper2">
	<div class="box"></div>
</div>

比如之前学到的属性值：transform: translateZ(400px); 增加 Z 轴的距离，那么 Z 轴越大，是不是也就代表着，这个元素，离我们的距离越近？

那么，你把一张图片，贴到你脸上，有什么效果？ 是不是非常大？这个 perspective 配合 transform：translateZ 就有这种效果。

<style>
	.wrapper {
		/* ⽗元素加透视效果 */
		perspective: 800px;
	}

	.box {
		width: 200px;
		margin: 200px auto;
		background: #ff0000;
		transform: translateZ(400px)
	}

	.box::after {
		content: '';
		display: block;
		clear: both;
	}

	.box>img {
		float: left;
		width: 100%;
	}

	.box:hover {
		/* translateZ 必须配合透视来使⽤ */
		/* transform: translateZ(400px) */
	}
</style>
<div class="wrapper">
	<div class="box"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0719%2Fa38e408fp00qwhqu10032d000go00b4p.png&thumbnail=650x2147483647&quality=80&type=jpg" alt=""></div>
</div>

这个其实很像我们现实中的例子一样，一张远处的图片，慢慢的移动到你脸上， 你会看见图片越来越大，贴到你脸上的时候，是不是你就看不见了？

到 800px 的时候，你人都和图片融合在一体了， 如果 801px 是不是你都穿过这张图片了？道理是一样的。

那么 transform:translateZ，到负数的时候，是不是值越小，图片离我们越远，同理的图片也就越小呢？

按照我们的思路继续，如果 perspective 值越小，是不是我们就离屏幕越近，那么图片也会越大（translateZ 是移动图片，perspective 是移动人和屏幕的距离，对吧，那么把 translateZ 归零。然后增加 perspective 试试看。）

然后，你会惊奇的发现，好像无论是增加，还是减少，图片都没有任何变化。

把 translateZ 设置成负值（按照我们的想法，Z 的值是正数，说明这个图片，离我们越近，那么反之，负值，离我们越远）移动 perspective 的值，把他的值变小（正常来说，值越小，是不是就代表我们离屏幕越近， 看的东西也就越大）

然后，你又会惊奇的发现，怎么图片不是越来越大呢？ 我们离屏幕越近，图片应该越大才对啊，怎么变小了呢？

实际情况是，我们看到的，并不是图片本身，而是图片的投影。是不是有点晕了，投影是什么鬼。

我们下面分析总结一下各种情况：

第一个情况，translateZ 的值越大，图片越大。

第二个情况，translateZ 的值越小，图片越小。

第三个情况，translateZ 为 0 的时候，图片不会移动，也就不会有投影了。

第四个情况，translateZ 为负数之后，人眼离得越近看的倒影越小。

最后补充一点，这个perspective 属性呢，要放在父级身上。

还有一个属性 perspective-origin，这个属性也是设置在父级身上。

这个属性呢，默认值是 center center，也就是 居中。这两个参数呢，是根据自身来定位的， 0px 0px 代表着元素的左上角，center center代表着元素的中间点。可以设置像素 50px 也可设置百分比 50%，还可以设置 top right left bottom center 等。

这个属性有什么用呢？ 这个属性是相当于人 的眼睛看哪里。你没有设置，也就是默认看父元素中间的地方。

李同学上课啦
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学术派 |用深度学习实现2D到3D的转换
爱奇艺技术产品团队
05-08 3101
随着 5G 时代的到来，VR 端应用呈爆发式增长，3D 内容作为构建 VR 生态的主力输出一直深受广大用户的追捧和喜爱。针对目前 3D 内容过少，质量不高、生产昂贵等现状，爱奇艺作为国内...
2D转3D
Rouen的专栏
11-17 3701
（本文部分内容摘选自http://www.cnblogs.com/ImageVision/archive/2012/03/26/2418602.html）
【CSS3】2D 和 3D 转换用法
qq_45677671的博客
01-03 1139
转换就是可以对元素进行移动、缩放、转动、拉长或拉伸，本文列举了 2d 和 3d 转换方法的教程和案例
2D转换和3D转换 transform
liu0218的博客
08-13 1423
2D和3D转换，进行位移，旋转，缩放等等
2D旋转与3D转换
elktime的博客
08-17 1383
文章目录一、2D转换1.移动： translate2.旋转： rotate3.缩放： scale4.2D 转换综合写法以及顺序问题5.动画(animation)5.1.定义动画5.2.使用动画5.3.动画常见属性5.4.动画简写方式二、3D转换1.3D位移：translate3d(x, y, z)2.3D旋转：rotate3d(x, y, z)3.透视：perspctive4.3D呈现 transfrom-style 一、2D转换 2D转换是改变标签在二维平面上的位置和形状 1.移动： translat.
CVPR 2023 ，只需简单的几步，2D视频变3D？最新视频创作AI模型！
最新发布
3D视觉工坊
09-10 1643
作者：PCIPG-Zhb | 来源：计算机视觉工坊在公众号「3D视觉工坊」后台，回复「原论文」即可获取论文pdf和代码。添加微信：dddvisiona，备注：三维重建，拉你入群。文末附行业细分群。文中解决了从描述复杂动态场景的单目视频中合成新视图的问题。作者提出了一种新方法，该方法不是在 MLP 的权重内对整个动态场景进行编码，而是该方法通过采用基于体积图像的渲染框架，该框架通过以场景运动感知的方...
2D转换 动画 3D转换
weixin_53317758的博客
04-07 362
好烦好烦好烦好烦好烦好烦好烦好烦好烦好困好困好困好困好困好困 transform:sacle(x,y) 缩放 缩放 x y放倍数 宽度，高度 注意其中x y用逗号分隔 可以是小数 不会影响其他盒子 鼠标经过时图片放大 所以只要注意hover是放在图片img内 而不是div 利用overflow:hidden将放大后图片多余部分隐藏起来 分页按钮案例 2D转换综合写法 注意： 同时使用多个转换，其格式为: transform: tra...
快速2D到3D转换 Rapid 2D to 3D Conversion
05-02
国外有关2D视频转3D视频的论文原文PDF，介绍了2D转3D的应用前景，相关方法以及最后的结果分析
将图像2D转换为3D教程
06-28
将图像2D转换为3D教程：一款免费的在线图像处理工具，可帮助用户将2D图像实时转换为精美的3D光场图像。它使用由Leia开发的专有算法，为照片、插画和艺术作品等2D图像添加深度和立体感。多格式转换: 支持将多种图像...
Dialog半导体推出首款2D到3D视频转换芯片
11-04
该芯片为包括智能手机和平板电脑等在内的各种便携式设备提供了2D/3D视频影像实时转换处理的功能。该器件同时也集成了一个视差栅栏（parallax barrier）屏幕驱动器，允许用户在不需要眼镜的情况下观看3D内容。 　
2D转3D算法
12-02
2D转3D算法，能够实现2D图像转成具有3D效果
将table转换成div+css
01-14
能快速的将table标签转换成div+css，在网页运行时减少带宽，更迅速的出现网页。增强客户体验！
图片2d转3d代码
11-20
图片2d转3d代码
一个2D转3D的方法
03-27
一个将图像2D转3D的算法
9个3D＆2D转换与过渡画廊特效
11-17
2D到3D转换：在某些情况下，可能需要将2D图像转化为3D模型。这涉及图像分析、形状识别和深度估计等技术，例如使用深度学习算法进行自动3D重建。 三、过渡画廊特效 过渡效果是在不同元素或场景之间创建平滑视觉变化...
论文研究- 2D转3D中基于物体建模的深度图生成 .pdf
08-22
2D转3D中基于物体建模的深度图生成 ，李逸伦，庄伯金，本文注意到在2D-3D视频转换技术中图像前景物体深度信息对于立体视觉效果的重要作用，重点研究了图像前景物体的深度计算与优化方法�
2d转换 3D转换
weixin_68908760的博客
12-25 397
2d转换 3D转换
基于单幅图像的2D转3D算法研究
热门推荐
Trent1985的专栏
11-07 1万+
最近，3D影片盛行，3D电视技术也层出不穷，3D技术在带给大家非凡的视觉冲击同时，也在告诉大家这背后隐藏了太多的商机。     目前的3D技术大体分为两种：软件技术和硬件技术。所谓硬件技术就是在拍摄影片时采用多摄像头及各种3D相关设备来拍摄片源；所谓软件技术就是将2D片源通过一定的软件转换为3D格式。     如何使用软件技术将2D转为3D呢？今天我们来研究一种基于单幅图像的3D转换算法。
MATLAB 3D转换成2D
05-26
将三维图形转换成二维图形有多种方法，具体方法取决于你所需要的二维表示形式和三维模型的特点。以下是一些常见的方法： 1. 投影法：将三维图形投影到一个平面上，得到二维图形。最常见的投影形式是正交投影和透视...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值