10CSS3——2D3D转换

最新推荐文章于 2022-08-13 15:17:35 发布
最新推荐文章于 2022-08-13 15:17:35 发布
阅读量172 收藏
点赞数
分类专栏： # css3学习 htmlcss学习园地 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47197906/article/details/119615339
版权

文章目录


CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。我们将结合过渡功能对 CSS3 的 2D 、 3D 转换进行学习。

  • 2D 转换
  • 3D 转换

1、转换属性

转换有下列属性：

  • transform： 将 2D 或 3D 转换应用到元素上去。
  • transform-origin：可以改变被转换元素的位置。
  • transform-style：规定被嵌套元素如何在 3D 空间中显示。
  • perspective：规定 3D 元素的透视效果，与 perspective-origin 结合使用，可以改变 3D 元素的底部位置，在实现一些 3D 效果，这一项是必不可少的。
  • perspective-origin：规定 3D 元素的底部位置。
  • backface-visibility：定义元素在不面对屏幕时是否可见。

transform-origin

transform-origin: x-axis y-axis z-axis;
/*
x-axis:定义视图在 X 轴的位置，left | center | right | length | %
y-axis:定义视图在 Y 轴的位置，top | center | bottom | length | %
z-axis:定义视图在 Z 轴的位置，length
*/

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1 {
            width: 300px;
            height: 300px;
            margin: 200px;
            border: 2px solid;
            text-align: center;
        }
        .div1 div {
            width: 300px;
            height: 300px;
            background: lightgreen;
            /*transform: 将 2D 或 3D 转换应用到元素上去*/
            transform: rotate(45deg);
        }
        .transform-origin div {
            /*transform-origin: x-axis y-axis z-axis;*/
            transform-origin: 10% 10%;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div>变换基点在默认位置</div>
    </div>
    <div class="div1 transform-origin">
        <div>变换基点在 10% 10% 位置</div>
    </div>
</body>

在这里插入图片描述
可以看到两个变换的基点有了明显的不同，第二个将变换基点设置到 10% 10% 的位置，变换也出现了不同。

transform-style

规定被嵌套元素如何在 3D 空间中显示

transform-style: flat | preserved-3d;
/*
flat：子元素将不保留 3D 位置
preserved-3d：子元素将保留 3D 位置
在实现一些 3D 效果的时候，一般都要声明为 preserved-3d
*/

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1 {
            width: 200px;
            height: 200px;
            border: 1px solid #bbb;
            margin: 100px;
            /* 在父元素中设置transform-style: preserve-3d; */
            /*flat：子元素将不保留 3D 位置
                preserved-3d：子元素将保留 3D 位置
                在实现一些 3D 效果的时候，一般都要声明为 preserved-3d*/
            transform-style: preserve-3d;
            transform: perspective(600px);
        }
        .div1 div {
            width: 200px;
            height: 200px;
            background: lightgreen;
            transform: rotateX(60deg);
        }
        .div2 {
            width: 200px;
            height: 200px;
            border: 1px solid #bbb;
            margin: 100px;
            /* 在父元素中设置transform-style: flat; */
            transform-style: flat;
            transform: perspective(600px);
        }
        .div2 div {
            width: 200px;
            height: 200px;
            background: lightgreen;
            transform: rotateX(60deg);
        }
    </style>
</head>
<body>
    <div class="div1">
        <div></div>
    </div>
    <div class="div2">
        <div></div>
    </div>
</body>

在这里插入图片描述
可以看到，div1 和 div2 除了 transform-style 属性之外，其它完全相同，一个保留了 3d 效果，一个未保留 3d 效果。

perspective

规定 3D 元素的透视效果，与 perspective-origin 结合使用，可以改变 3D 元素的底部位置,在实现一些 3D 效果，这一项是必不可少的。

perspective: number | none;
/*
number：单位 px，元素距离视图的距离
none：默认值，0，无透视
*/

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1 {
            width: 300px;
            height: 300px;
            margin: 50px;
            border: 1px solid #bbb;
        }
        .div1 div {
            width: 100%;
            height: 100%;
            background: lightgreen;
            /*perspective：规定 3D 元素的透视效果，与 perspective-origin 结合使用，
            可以改变 3D 元素的底部位置,在实现一些 3D 效果，这一项是必不可少的。
            number：单位 px，元素距离视图的距离
            none：默认值，0，无透视
            */
            transform: perspective(600px) rotateY(45deg);
            /*设置了透视和变换方式*/
        }
    </style>
</head>
<body>
    <div class="div1">
        <div></div>
    </div>
</body>

在这里插入图片描述

perspective-origin

规定 3D 元素的底部位置

perspective-origin: x-axis y-axis;
/*
x-axis:定义该视图在 X 轴上的位置。默认为 50%。left|center|right|length|%
y-axis:定义该视图在 Y 轴上的位置。默认为 50%。top|center|bottom|length|%
将透视聚集点改变到其他位置。
*/

backface-visibility

定义元素在不面对屏幕时是否可见

backface-visibility: visible|hidden;
/*
visible：背面可见
hidden：背面不可见
*/

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background: lightgreen;
            transform: rotateY(180deg);
            /* 将 div 元素都翻转 180deg，翻转到背面 */
        }
        .div1 {
            backface-visibility: hidden;
        }
        .div2 {
            backface-visibility: visible;
        }
    </style>
</head>
<body>
    <div class="div1">div1 backface-visibility: hidden;</div>
    <div class="div2">div2 backface-visibility: visible;</div>
</body>

在这里插入图片描述
可以看到，两个 div 块在翻转后都是背面朝向我们，当我们设置 div1 的 backface-visibility: hidden 时，div1 就不可见了，只有 div2 是可见的。

2、2D转换

2D 转换有以下几种常用方法（transform属性下的函数）：

  • translate(x,y) ：平移，x为x轴上的平移，y为y轴上的平移，根据原始位置的 x 、y 轴位置，分别偏离 x 、y 的距离。
 {
 transform: translate(50px,100px);
 -ms-transform: translate(50px,100px); /* IE 9 */
 -webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

另外两种⽅法：
（1）translateX(x)元素仅在⽔平⽅向位移
（2）translateY(y)元素仅在垂直⽅向位移
translateX(x)和translateY(y)同时使用，不会同时生效，后面的会覆盖掉前面的。
在这里插入图片描述
在这里插入图片描述

  • rotate(angle) ：根据给定的angle 大小旋转，正度数表示顺时针旋转， angle 为负，则逆时针旋转。
{
 transform: rotate(30deg);
 -ms-transform: rotate(30deg); /* IE 9 */
 -webkit-transform: rotate(30deg); /* Safari and Chrome */
}

在这里插入图片描述

  • scale(x,y) ：将元素根据中⼼原点进⾏缩放，根据 x 、y 的值，对应的放大宽度和高度。
{
 -ms-transform:scale(2,3); /* IE 9 */
 -webkit-transform: scale(2,3); /* Safari */
 transform: scale(2,3); /* 标准语法 */
}

另外两种⽅法：
（1） scaleX(x)元素仅在⽔平⽅向上缩放(x轴缩放)
（2） scaleY(y)元素仅在垂直⽅向上缩放(y轴缩放)
在这里插入图片描述

  • skew(<angle> [,<angle>]) ：包含两个参数值，分别表示X轴和Y轴倾斜的⻆度，如果第⼆个参数为空，则默认为0，参数为负表示向相反⽅向倾斜。
{
 transform: skew(30deg,20deg);
 -ms-transform: skew(30deg,20deg); /* IE 9 */
 -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

（1）skewX(< angle>)：表示只在X轴(⽔平⽅向)倾斜。
（2）skewY(< angle>)：表示只在Y轴(垂直⽅向)倾斜。
在这里插入图片描述
在这里插入图片描述

  • matrix() ：matrix 变换涉及到了线性代数的知识，在此不作讲述。感兴趣的同学可以自行了解。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1 {
            margin: 50px;
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            opacity: 0.5;
            transition: 2s;
        }
        .div1:hover {
            transform: translate(30px, 40px);
            /*根据原始位置的 x 、y 轴位置，分别偏离 x 、y 的距离。*/
            /*translate(x,y)*/
            opacity: 1;
        }
        .div2 {
            margin: 50px;
            width: 200px;
            height: 200px;
            background-color: cyan;
            opacity: 0.5;
            transition: 2s;
        }
        .div2:hover {
            transform: rotate(180deg);
            /*rotate(angle)*/
            /*：根据给定的 angle 大小，顺时针旋转，如果 angle 为负，则逆时针旋转。*/
            opacity: 1;
        }
        .div3 {
            margin: 50px;
            width: 200px;
            height: 200px;
            background-color: orange;
            opacity: 0.5;
            transition: 2s;
        }
        .div3:hover {
            transform: skew(20deg, 30deg);
            /*skew(angle,angle)*/
            /*根据给定的两个角度，分别在水平方向和垂直方向倾斜，第二个角度默认为 0 。*/
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</body>

把鼠标移动到矩形上，观察效果。

3、3D 转换

3D 转换语法与 2D 转换语法较为类似

  • translate3d(x,y,z)：定义 3D 转化，给出三个值，分别应用于三个坐标轴上
  • translateX(x)：定义 3D转化，仅用于X 轴
  • translateY(y)：定义 3D 转化，仅用于 Y 轴
  • translateZ(z)：定义 3D 转化，仅用于Z 轴 ，在z轴上的平移，z轴为⾯向屏幕的这个⽅向

在这里插入图片描述
在这里插入图片描述

  • perspective：定义 3D 转换元素的透视视图
    在这里插入图片描述

在这里插入图片描述

  • scale3d(x,y,z)：定义 3D 缩放转换

  • scaleX(x)：定义 3D 缩放转换，仅用于X 轴

  • scaleY(y)：定义 3D 缩放转换，仅用于 Y 轴

  • scaleZ(z)：定义 3D 缩放转换，仅用于 Z 轴

  • rotate3d(x,y,z,angle)：定义 3D 旋转

  • rotateX(angle)：定义沿 X 轴的 3D 旋转

 {
 transform: rotateX(180deg);
 -webkit-transform: rotateX(180deg); /* Safari 与 Chrome */
}
  • rotateY(angle)：定义沿 Y 轴的 3D 旋转
 {
 transform: rotateY(180deg);
 -webkit-transform: rotateY(180deg); /* Safari 与 Chrome */
}
  • rotateZ(angle)：定义沿 Z 轴的 3D 旋转

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1 {
            margin: 50px;
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            opacity: 0.5;
            transition: 2s;
        }
        .div1:hover {
            /*X 轴旋转*/
            transform: rotateX(180deg);
            opacity: 1;
        }
        .div2 {
            margin: 50px;
            width: 200px;
            height: 200px;
            background-color: cyan;
            opacity: 0.5;
            transition: 2s;
        }
        .div2:hover {
            /*Y 轴伸缩*/
            transform: scaleY(2);
            opacity: 1;
        }
        .div3 {
            margin: 50px;
            width: 200px;
            height: 200px;
            background-color: orange;
            opacity: 0.5;
            transition: 2s;
        }
        .div3:hover {
            /*X 轴移动*/
            transform: translateX(50%);
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</body>

把鼠标移动到盒子上，观察效果。

远近2021
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2D转换和3D转换
TKOP_的博客
12-21 701
2D转换和3D转换也是css3新增的重要内容。
2D3D转换
DGL_CSDN的博客
08-31 710
1 2D转换 转换是 CSS3 中具有颠覆性的⼀个特征，可以实现元素的位移、旋转、变形、缩放。 通过 transform 转换来实现 2D 转换或者 3D 转换。 2D转换包括： 缩放 移动 旋转 倾斜 1.1 scale 设置元素的缩放效果 语法： transform: scale(x, y); transform: scale(2, 0.5); 参数： x：表示水平方向的缩放倍数 y：表示垂直方向的缩放倍数 注
2D转换和3D转换 transform
liu0218的博客
08-13 1427
2D和3D转换，进行位移，旋转，缩放等等
CSS_2D/3D转换
dolola的博客
01-31 221
transform:translate(50px,100px);左侧为X轴，顶部为y轴，根据给定的参数移动 transform: rotate(30deg); 旋转，正数为顺时针负数为逆时针 transform: scale(2,3); 缩放，第一个值为宽度的倍数，第二个值为高度的倍数 transform: skew(30deg,20deg);第一个值为水平的倾斜角度，正值向左，负值向右
【CSS3】2D 和 3D 转换用法
qq_45677671的博客
01-03 1142
转换就是可以对元素进行移动、缩放、转动、拉长或拉伸，本文列举了 2d 和 3d 转换方法的教程和案例
随手记——css3 2D转换（transform）
01-08
css3 2D转换（transform） 位移（translate） 旋转（rotate） 转换中心点（transform-origin） 缩放（scale） 2D转换综合写法 正文 __start： 位移（translate） 语法 说明 transform:translate(x,y) 元素在x...
HTML——3d炫酷旋转特效.rar
02-11
而CSS3的3D转换则更为轻量级，更适合用于2D界面中的简单3D效果。 在本压缩包中，"3d炫酷旋转特效"可能包括HTML文件、CSS文件以及可能的JavaScript文件。HTML文件负责构建页面结构，CSS文件则设置元素的样式，包括3D...
纯CSS3实现简易3D按钮特效代码
03-20
CSS3是层叠样式表（Cascading Style Sheets）的最新版本，它引入了许多新特性，其中包括2D和3D转换、动画以及更丰富的选择器，这使得我们可以创建出更加动态和复杂的网页元素，如我们今天的主题——3D按钮。...
css做一个3D房子.rar
08-02
首先，我们需要理解CSS3中的关键概念——3D转换。这些包括`transform`属性中的`translate3d()`, `rotateX()`, `rotateY()`, `rotateZ()`以及`perspective`属性。`perspective`用于设置观察者到3D空间中假想平面的...
从css 3d说到空间坐标轴附
12-14
CSS 3D是一种强大的Web开发技术，允许开发者创建...总结，理解CSS 3D的核心概念——视角容器、载体和3D转换，是创建富有视觉冲击力的3D网页的关键。结合空间坐标轴的知识，开发者可以创建出各种令人惊叹的Web交互体验。
web前端之CSS3（3）：2D和3D转换
薛定谔的猫-前端领域
05-11 1096
CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。 2D 转换 以下列出了所有的转换属性: Property 描述 CSS transform 适用于2D或3D转换的元素 3 transform-origin 允许您更改转化元素位置 3 transform属性2D变换方法： translate()：根据左(X轴)和顶部(Y轴...
CSS3新属性精简版
丁哒哒的博客
11-26 555
一、边框 border-radius（圆角） box-shadow（阴影） border-image（边框图片） 二、背景 background-image（背景图片） background-size（背景图片大小） background-origin（背景图片的定位区域） background-clip（背景图片的绘制区域--截图） 三、 渐变 线性渐变（Linear Grad...
css3基础知识点--transform 3D变换
阿俊的博客
07-04 877
接上一篇 5、perspective 设置透视距离 6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示 7、translateX、translateY、translateZ 设置三维移动 8、rotateX、rotateY、rotateZ 设置三维旋转 9、scaleX、scaleY、scaleZ 设置三维缩放 10、tranform-origi...
CSS3 3D转换
bwf_erg的博客
05-02 495
CSS3 允许您使用 3D 转换来对元素进行格式化,3D和2D的区别就是平面和空间的区别。 一、 rotateX()方法     rotateX()方法，围绕其在一个给定度数X轴旋转的元素。 代码例子： 运行效果：     二、 rotateY()方法     rotateX()方法，围绕其在一个给定度数X轴旋转的元素。 代码示例： div { transform:
2D和3D转换
qq_45052409的博客
07-04 2415
转换（transform） transform 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。 要想学好2D和3D转换要先对 坐标 有一定了解 2D 2维坐标系 2D转换中的 属性 在使用转换是我们要先给元素添加转换属性 transform(x,y)，X代表X轴，Y代表Y轴 1.移动 translate 当我们要移动盒子时，可以给盒子添加 transform:translate(50px,50px); 属性 让盒子做到移动效果(小括号里可以使用百分比%) 2.旋转 r
试试这个AI实验：把2D图像转换成3D
whale52hertz的博客
05-09 9721
文章来源：ATYUN AI平台 2D图像转换为3D 今年1月，Fleisher和Shirin Anlen（该AI的开发人员）写了一个关于图像转换的AI，用来从视频中剔除角色。最近，通过交互式AI实验更新了他们的网站，该实验可将任何平面图像转换为3D。 视频链接：试试这个AI实验：把2D图像转换成3D 我们以前也见过类似的AI，但这次做的不仅仅是面部重建。它可以给任何网络摄像头提供Ki...
2D-to-3D转换技术
stevedish_xiaojia的博客
10-20 3975
随着3DTV的普及和发展，相关的技术也在不断的研究之中。3DTV广播系统包含3D内容的产生，编码，传输，解码和渲染。现今，3D内容的短缺是影响3DTV普及和发展的重要因素之一。3D内容的产生主要分3种：1）利用深度相机拍摄深度图+单个彩色相机拍摄一路彩色视频；2）两个彩色相机拍摄两路彩色视频；3）单个彩色相机拍摄一路彩色视频+2D-to-3D技术。由于深度相机的昂贵，导致第一种方法没有普及，第二种...
基于单幅图像的2D转3D算法研究
热门推荐
Trent1985的专栏
11-07 1万+
最近，3D影片盛行，3D电视技术也层出不穷，3D技术在带给大家非凡的视觉冲击同时，也在告诉大家这背后隐藏了太多的商机。     目前的3D技术大体分为两种：软件技术和硬件技术。所谓硬件技术就是在拍摄影片时采用多摄像头及各种3D相关设备来拍摄片源；所谓软件技术就是将2D片源通过一定的软件转换为3D格式。     如何使用软件技术将2D转为3D呢？今天我们来研究一种基于单幅图像的3D转换算法。
css3——div内文字换行及省略显示
最新发布
05-13
要实现在div内的文字换行和省略显示，可以使用CSS3中的text-overflow属性和white-space属性。 text-overflow属性可以设置当文本溢出容器时如何显示。常见的值有： - clip：裁剪文本，超出部分不显示。 - ellipsis：在超出容器部分显示省略号。 white-space属性可以控制元素内文本的空白符处理方式。常见的值有： - normal：合并空白符，换行符作为分隔符。 - nowrap：合并空白符，不允许换行。 - pre-wrap：保留空白符和换行符，但自动换行。 下面是一个例子： ```html <div class="text"> This is a long text that should be truncated with ellipsis. </div> ``` ```css .text { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 这样就可以实现在宽度为200px的div中，超出部分显示省略号的效果。如果想要在一行内显示尽可能多的文本，可以将white-space属性设置为`normal`或`pre-wrap`。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值