CSS-3D转换+ perspective+transform-style

最新推荐文章于 2023-08-11 22:40:22 发布
最新推荐文章于 2023-08-11 22:40:22 发布
阅读量206 收藏
点赞数
分类专栏： HTML/CSS/H5/JavaScript 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lhy_JL/article/details/114330039
版权

perspective：

  • 如果想要网页产生3D效果需要透视，perspective（理解成3D物体投影在2D平面内）
  • 模拟人类的视觉位置
  • 也称为视距：眼睛到屏幕的距离
  • 距离越近，平面成像越大；越远成像越小(近大远小)，将元素投到屏幕上。
  • 单位是像素

透视 写在被观察元素的父盒子上！！！

哪个盒子（A盒子）添加了perspective,意思就是A盒子重新定义了观察的眼睛的位置。

transform-style:

子元素是否呈现3D效果。

添加的位置：被观察元素的父盒子。

  • transform-style:flat；默认不开启3D空间
  • transform-style:preserve-3d；开启3D空间
  • 属性添加到父级，子元素才能保持3D 立体空间

css总结：

Lhy@@
关注
专栏目录
前端学习笔记：CSS3新增3D转换
weixin_43339892的博客
02-05 617
3D转换transfrom 目录前端开发中的三维坐标系位置一、透视(视距)和3D呈现1. 透视(视距) perspective2. 3D呈现transform-style二、3D位移(移动)：translate3d(x,y,z)1. translateZ2. translate3d(x,y,z)三、3D旋转：rotate3d(x,y,z,deg) 前端开发中的三维坐标系位置 x轴：水平向右 注意：x右边是正值，左边是负值 y轴：垂直向下 注意：y下面是正值，上面是负值 z轴：垂直屏幕 注意：往外面是正值.
CSS之3D转换（translate3d，透视perspective，旋转rotated3，transform-style)
m0_61547956的博客
04-08 7828
1、translate3d 在浏览器中，y轴正方向垂直向下，x轴正方向水平向右，z轴正方向指向外面。 z轴越大离我们越近，即看到的物体越大。z轴单位一般是px。z轴说物体到屏幕的距离。 /* transform: translate3d(100px, 100px, 100px); x,y不能省略写，不想要就写0。 2、透视perspective 透视又称视距，人的眼睛到屏幕的距离，距离视觉点越近在电脑上成像越大。 根据近大远小，物体遮挡后面看不见的原理。 透视写在被观察元素的父盒子上，透视越小
吃透css3之3d属性--perspective和transform
weixin_34099526的博客
03-23 201
本文为原创，转载请注明出处：cnzt 文章：cnzt-p 　　写在前面：最近写了个3d轮播效果图，在此将思路和过程中遇到的问题都记录下来。 首先，我们下来了解一下perspective和transform都是做什么的。 　　　　transform -- css3属性，可以对元素进行变换(2d/3d)，包括平移translate,旋转rotate,缩放...
css3 3d perspective,CSS 3D transforms系列教程-Perspective
weixin_32534073的博客
08-03 491
CSS 3D transforms的出现已经有好几年的历史了，但是由于缺乏浏览器的广泛支持，它一直没有得到广泛的应用。这个系列教程旨在让更多的童鞋了解和使用CSS 3D transforms。要将一个元素制作成3D立体效果，需要在元素上使用perspective(透视)。可以有两种方式为元素添加perspective：使用transform属性，将perspective作为一个功能函数来使用：tr...
3D空间转换（位移、旋转、立体呈现）
llssdshiyi的博客
01-25 1425
属性：transform，z轴垂直于屏幕，正值方向指向用户，负值方向指向屏幕里面。 空间位移： 复合语法：transform:translate3d(x,y,z); 单独语法：transform:translateX(值);transform:translateY(值);transform:translateZ(值); x、y轴上的改变与2d位移没有区别，z轴上的移动需要给父级添加perspective: 像素单位数值;实现透视效果。 perspective常用数值范围在800-1200之间.
实例讲解CSS3中Transform的perspective属性的用法
水月夜的博客
12-27 2626
基础 CSS3的transform可以做2D的操作，当然也有3D。 但需要再一个拥有perspective属性的父元素才能显现3D的效果。 例如： XML/HTML Code复制内容到剪贴板 div id="div1">    div id="div2">3Ddiv>  div>   perspective属性固名思义就是透视的意思；该属性可以定义3D视觉的角度
Web-前端html+css从入门到精通 149. 3D相关语法及扩展学习.zip
05-23
`transform-style: preserve-3d;`确保子元素在3D空间内保持自己的3D形状，而不是扁平化。而`backface-visibility`则可以隐藏元素翻转时的背面，进一步优化3D效果的呈现。 此外，3D变换还可以与动画结合，创建出动态...
Web-前端html+css从入门到精通 147. 3D基本语法及成像原理.zip
05-23
`transform-style: preserve-3d;`确保子元素保持其3D空间内的结构，而不是扁平化显示。而`backface-visibility`控制元素在翻转时是否可见，这对于实现3D旋转效果尤其有用。 接下来，`perspective`属性是创建3D视图...
Web-前端html+css从入门到精通 150. 3D效果之旋转木马.zip
05-23
2. **CSS3 3D转换**：CSS（Cascading Style Sheets）是用于控制网页外观的样式表语言。CSS3引入了3D转换功能，使得开发者可以对元素进行旋转、缩放、平移等3D变换。在旋转木马效果中，主要用到的是`transform`属性中...
CSS-3D悬停相册动画
最新发布
03-21
- `transform-style: preserve-3d;`：此属性确保子元素在3D空间中保持它们的3D结构，而不是扁平化。 - `perspective`: 设置观察者的视距，影响3D元素的深度感。 - `backface-visibility: hidden;`：隐藏元素的...
深入探究CSS3 transform-style:preserve-3d
weixin_45696837的博客
10-17 3703
这些都是我参照文档以及自己试出来的理解。 至于对不对嘛，还要实践才知道。 来看嘛，打都打开，也许会有意想不到的收获呢！ 默认值flat没什么好说的。 preserve-3d：指定子元素定位在三维空间内。 上效果解释，说服力满满滴！ <style> body { perspective: 800px; perspective-origin: 250px 300px; } .wrapper { position: relati
CSS3-3D变换 transform-style:preserve-3d
weixin_47295886的博客
07-18 1063
3D变换 transform-style:preserve-3d
【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-11 5629
一、" 透视 " 概念简介 1、" 透视 " 概念引入 2、视距与成像关系 二、CSS3 中 " 透视 " 属性设置 1、" 透视 " 语法设置 2、代码示例 - " 透视 " 语法设置 添加了透视后的代码示例 执行结果
css3的perspective或者transform:tanslateZ没有效果
spadescy的博客
02-22 1377
css3的perspective或transform:tanslateZ没有效果
用CSS的perspective和transform将图片扭曲成类似PS的透视效果
Marble Race
12-05 1770
最终达到下透视效果： 个人感想：这种效果在PS中用变形扭曲很快就实现，然而在CSS中做这个效果很麻烦，需要不断地微调。其实是可以有【简单粗暴】的方法，那就是直接在CSS中直接定位四点的坐标，当然CSS是没有这个功能的（希望CSS在未来版本中有机会加上，哈哈，草民我仅仅是Naive一下）。 HMTL <div class="img-box-outer"> <div class="img-box-inner"> <img src="images/img_src.jpg"&
css3基础知识点--transform 3D变换坐标系、perspective透视距离
阿俊的博客
07-04 4192
在学习CSS3 3D 变换前我们有必要学习下坐标系，不然各种角度让人觉得很头疼。数学课本中的三维坐标系是右手坐标系，而计算机中的左手坐标系使用较多。 1、左手坐标系 伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图： 2、CSS3中的3D坐标系 CSS3中的3D坐标系与上面的左手坐...
html5学习笔记——三、图文展示网页设计
乐乐呀的博客
03-26 1439
常用图像标签 css阴影和渐变 border-radius属性 css transitions css transform 2D转换 元素变形原点 3D转换 css 精灵技术 标签用于定义网页中的图像，语法格式如下： 标签和标签 当需要在网页中添加一个插图时 ，就可以使用标签来实现
css3 利用perspective实现翻页效果和正方体 以及翻转效果
weixin_30849403的博客
05-08 240
要点： 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见，显示出反面的元素 demo1 翻页效果： html <div class="demo1"> 　　<div class="demo1-1"> 　　　　<div cla...
3D转换之位移(translate)、透视(perspective)和旋转(rotate)，你了解了嘛？
wj624的博客
02-25 1126
D转换之位移(translate)、透视(perspective)和旋转(rotate)，你了解了嘛？ 🌵🌵🌴三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴:水平向右 注意:×右边是正值，左边是负值 y轴:垂直向下 注意:y下面是正值，上面是负值 z轴:垂直屏幕 注意:往外面是正值，往里面是负值 🌵🌵🌴3D移动 translate 语法格式： transform: translateX(100px); transform: translat
transform-style: preserve-3d;
09-04
### 回答1： transform-style: preserve-3d; 是一个CSS3属性，用于定义一个元素的子元素是如何在三维空间中呈现的。 当应用于一个元素时，它指示该元素的子元素应该在三维空间中进行变换，而不是在二维平面中变换。这意味着子元素可以在三维空间中进行旋转、缩放和移动，而不受到其父元素的影响。 例如，如果一个元素有许多子元素，当应用 transform-style: preserve-3d; 后，这些子元素将会在三维空间中摆放，这样它们可以以更自由的方式进行旋转和变形，而不会受到其父元素的影响。 需要注意的是，使用 transform-style: preserve-3d; 属性时，父元素必须具有透视属性（perspective），否则子元素将无法正确呈现在三维空间中。 ### 回答2： transform-style: preserve-3d; 是一个CSS属性，用于控制3D变换元素内容的呈现方式。 当使用3D变换属性（如rotateX、rotateY等）来转换一个元素时，该元素的子元素也会被影响，它们可能会在3D空间中随着父元素的变换发生改变。但是，默认情况下，子元素的变换发生在二维平面上，即使父元素发生了3D变换。 使用transform-style: preserve-3d; 可以改变子元素的变换方式，使其也在3D空间中进行变换。这意味着子元素可以跟随父元素的旋转和变换，并在3D空间中自由移动。 此属性对于制作3D效果的网页或动画非常有用。例如，在一个3D立方体中，可以通过设置父元素的transform-style为preserve-3d，使得立方体内的内容也在3D空间中进行变换，从而创造出更加生动逼真的效果。 需要注意的是，transform-style: preserve-3d; 只会应用在直接子元素上，对于孙元素或更深层次的元素，需要单独设置transform-style属性。 总之，通过使用transform-style: preserve-3d; 属性，可以在3D变换中更好地控制元素的呈现方式，增强网页或动画的视觉效果。 ### 回答3： transform-style: preserve-3d; 是CSS属性，用于定义一个元素的子元素应如何在3D空间中呈现。 当我们在 CSS 中使用 3D 转换时，通常会在某个容器元素上使用 transform-style: preserve-3d; 属性。这样可以确保容器元素的子元素能够保持其在3D空间中的位置和变换效果。 这个属性的默认值是 flat，即子元素在容器元素的平面内进行变换。而当我们将属性值设置为 preserve-3d 时，容器元素的子元素将以3D空间的形式进行变换，使得子元素可以具有在3D空间中移动、旋转和缩放的效果。 这个属性在进行复杂的3D转换时非常有用。通过将容器元素的子元素设置为 preserve-3d，我们可以在子元素上应用各种3D转换，例如 translate3D、rotate3D 和 scale3D 等。这样能够更加精确地控制子元素在3D空间中的位置和变换效果。 总之，transform-style: preserve-3d; 是一个非常有用的CSS属性，当我们需要在页面中创建3D效果时，可以使用它来确保容器元素的子元素能够正确地在3D空间中进行变换。通过合理运用这个属性，我们可以创造出令人惊叹的3D动画和效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值