찾다
웹 프론트엔드HTML 튜토리얼初识CSS3 3D效果,浅谈理解_html/css_WEB-ITnose

刚接触完css3的3D变换,感觉确实十分华丽,趁着热乎劲,把感想和理解记录下来。如有不对,欢迎指正。

CSS3中提供了2D和3D两种变换方式,所谓的变换主要就是位移和旋转,2D和3D的区别大概就是有没有Z轴方向的变换,仅此而已。

所以,为了后面更好的理解3D变换,我们先说一说2D的变换。

translate()和rotate()

上面两种方法是2D变换的常用方法,一个对应位移,一个对应旋转,当然还有其他的,这里就不展开,先只说说这两个。具体语法是这样的,比如我们想变换一个div。

#div1{transform:translate(100px,100px);}
#div2{transform:rotate(50deg);}

transform是css3提供的一个属性,专门用于图形变换,这个属性现在可能得到了大部分浏览器的支持,但3D效果用到的后面几种属性,还是需要做兼容,为了节省时间,讨论技术本身,后面就不照顾兼容了。

言归正传,上面两个方法光从参数也很容易理解,translate()是位移方法,分别朝x轴方向,y轴方向移动一段距离,距离可以为负。rotate()是旋转方法,会绕原点顺时针旋转一个角度。那么问题来了,原点在哪?既然是变换,必须得有参考系,这才有准确的变换效果,所以,无论2D还是3D,找准坐标系,找准坐标系,找准坐标系。因为很重要,所以说三遍。

一般来说,原点默认为元素中心点,当然这个原点也是可以调整的,通过这个属性 transform-origin:50% 50%; 这里的50% 50%表示的就是中心默认的位置,可以改成其他的,比如说左上角就应该写成 tansform-origin:0% 0%;  这样就可以调整原点了。

transform属性

了解完2D,进阶一下,transform属性同样可以进行3D变换,简单来说就是分别针对x,y,z进行设置。

#div1{

  transform:translateX(100px) translateY(100px) translateZ(100px) rotateX(30deg) rotateY(30deg) rotateZ(30deg);

}

旋转部分,需要特别说明一下,rotateX()表示绕X轴旋转的角度,这个变换,整个坐标系会跟着一起旋转,所以找不到原点得是多糟糕的事情,坐标系永远是跟随我们的元素的,每个元素都有自己的坐标,以初始状态来说,原点在元素中心,x轴正方向从原点水平向右,y轴正方向从原点竖直向下,z轴正方向则是从原点朝向我们的屏幕,也就是说,我们的元素正对的方向就是它自己的z轴方向,这一点千万要记好。

因为transform归根结底只是个属性,所以重复的transform只会覆盖,缩写形式就是上面这种,需要注意的是中间用空格隔开而不是逗号。另外,个人理解,transform从中文上来说,应该是“变换成”,而不是“变换”,它表现的是变换完成之后的样子。

透镜,模拟出来的3D效果

完成了上面的变换,有3D效果了么,我们看个demo。

这里还没有进行变换,接下来我们加入变换的属性。

我们发现,它确实变形了,但是,和我们想象中的3D效果相差甚远,甚至可以说完全是一个平面效果啊。

其实css3的3D效果,是靠浏览器通过计算,渲染,最后模拟出来的一个三维效果。如果要模拟的像,可以欺骗人的眼睛,那必须要考虑一个东西,就是透视,或者说景深,再通俗点就是近大远小。只有满足这个,css3的3D变换才有3D的效果,不然即使确实进行了3D变换,浏览器也会把它投影成一个平面的,完全没有3D效果。那怎么给它增加一个透视或者说景深呢,很简单,一个属性就可以搞定。

perspective:500;

perspective属性就是所谓的透镜属性,后面的数字单位是像素,用来模拟视角离元素的距离,给最外围的元素设定好这个属性,里面的元素在景深方向有所变换时,就能准确表现出近大远小。

我们来试一下。

OK,完美,一个平面的元素,现在获得了3D的变换效果,通过几个div的不同的旋转变换,和位移,我们很容易就组合出一个正方体,这里的话要注意坐标系会跟着元素一起动的,不过它的Z轴方向一定是div正面朝向的位置,为什么一定要强调正面,是因为3D变换可以让他旋转180度,它的背面可以被我们看到,这个时候,Z轴方向就相反了。而正面,就是我们可以放内容的那个面。

透镜,舞台,组合体

如果我们组合出了一个立方体,想要它动起来,该怎么做?“立方体”是由6个div拼成,每个又有自己独立的坐标系,通过统筹他们协作变换完成这个效果,想想都让人觉得不可能。那有没有简单的方法,有,给组合体外面套一个div,我们只要旋转变换它,里面的子元素,自然也跟着旋转了。所以,在我的理解里,组合体就是一个不能运动的死物,想要动效的话,就得给它们一个“舞台”,我们通过操作舞台,就可以全方位展示,运动我们的组合体。所以我们获得了一个三层结构,最外层的透镜,里面的舞台,和舞台里的组合体。在一些大牛的博客里,可能更倾向于把它们叫做“镜头”,“空间”和“物体”。这个就是实现3D效果的基础。

最后一点东西,“保留3D位置”

我最后完成了一个立方体,并用一个div作为舞台包裹了它,想通过旋转舞台,看看其他角度的立方体,结果出现了这个情况。

立方体变成了一个平面了!为什么会这样?其实细想一下也很容易理解,div本来就是一个平面元素,所以立方体直接被它“压扁”了。舞台空间不够,也就装不下我们的展示物,所以我们要给舞台扩容,给它添加一个属性就可以解决这个问题。

transform-style:preserve-3d;

这个属性的意思是,给子元素保留3D位置,如果你不设定,那就默认不保留,也就是子元素都以平面显示。

添加完这个属性我们来看一下。

OK,立方体就出来了。

 

以上就是我对最基础3D效果的理解,3D效果当然不可能全都这么简单,有一些东西我没有涉及,比如perspective-origin,体会不深不敢妄谈,而且许多3D技巧我还没有掌握,后面如果再有所体会,一定分享经验。

 

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향Apr 19, 2025 am 12:02 AM

HTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 ​​문제의 최적화가 필요합니다.

HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.

HTML의 미래 : 웹 디자인의 진화 및 트렌드HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AM

HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.

HTML vs. CSS vs. JavaScript : 비교 개요HTML vs. CSS vs. JavaScript : 비교 개요Apr 16, 2025 am 12:04 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. HTML은 컨텐츠 구조를 담당하고 CSS는 스타일을 담당하며 JavaScript는 동적 동작을 담당합니다. 1. HTML은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의하여 의미를 보장합니다. 2. CSS는 선택기와 속성을 통해 웹 페이지 스타일을 제어하여 아름답고 읽기 쉽게 만듭니다. 3. JavaScript는 스크립트를 통해 웹 페이지 동작을 제어하여 동적 및 대화식 기능을 달성합니다.

HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworksporstylingandjavaScriptOfforIncincivity, WebDevelopment 향상.

HTML : 웹 페이지 구조 구축HTML : 웹 페이지 구조 구축Apr 14, 2025 am 12:14 AM

HTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.

텍스트에서 웹 사이트로 : HTML의 힘텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경