CSS3 3D移动（translate3d）、透视（perspective）、3D旋转（rotate3d）、3D呈现（transform-style）

3D移动translate3d

transform: translateX(100px)：仅仅是在X轴上移动
transform: translateY(100px)：仅仅是在Y轴上移动
transform: translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般都是用px单位）
transform: translateX(100px) translateY(100px)：沿着X轴和Y轴同时移动
transform: translate3d(x,y,z)：在x，y，z轴上都移动

透视perspective

透视perspective的语法格式如下：
方法1:perspective: 800px;
方法2:transform: prespective(800px);注意：
1、方法1定义的perspective只在初次渲染时，投影在屏幕上；
2、方法2定义的perspective会根据transform动画的变化来进行重新的渲染；
3、当使用js或Css3进行动画时，尽量选择方法2

如果想要在网页上产生3D效果，就需要使用透视
透视的单位是像素
透视也称为视距，表示人的眼睛到屏幕的距离。对同一个位置的物体，视距越大，成像越小
透视要写在被观察元素的父盒子上面（可以是祖先元素）
下图就是一个透视的说明图，其中

d：就是视距，即人的眼睛到屏幕的距离
z：就是z轴，即物体到屏幕的距离，z轴越大（正值），成像也就越大；负值则相反

3D旋转rotate3d

transform: rotateX(45deg)：沿着x轴正方向旋转45度

其中，旋转角度为正时，图片上边框向里旋转；旋转角度为负时，图片上边框向外旋转。（可以借助左手准则来记忆，手指的弯曲方向就是旋转角度为正时的旋转方向）
transform: rotateY(45deg)：沿着y轴正方向旋转45deg

其中，旋转角度为正时，图片上边框向里旋转；旋转角度为负时，图片上边框向外旋转。（可以借助左手准则来记忆，手指的弯曲方向就是旋转角度为正时的旋转方向）
transform: rotateZ(45deg)：沿着z轴正方向旋转45deg，跟2D旋转几乎一样，都是在平面内旋转
transform: rotate3d(x,y,z,deg)：沿着自定义轴旋转deg

其中，xyz表示旋转轴的矢量；deg表示旋转的角度。举例说明如下：

transform: rotate3d(1,0,0,45deg)     ——表示沿着x轴旋转45度
transform: rotate3d(1,1,0,45deg)        ——表示沿着对角线旋转45度

3D呈现transform-style

transform-style属性是控制子元素是否开启三维立体环境
transform-style: flat 子元素不开启3d立体空间，默认值
transform-style: preserve-3d 子元素开启3d立体空间
该属性是写给父级元素的，但影响的是子元素

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！

CSS3 3D移动（translate3d）、透视（perspective）、3D旋转（rotate3d）、3D呈现（transform-style）相关推荐

CSS之3D转换（translate3d，透视perspective，旋转rotated3，transform-style)
目录 1.translate3d 2.透视perspective 3.rotated3d旋转 4.3D呈现transform-style(重要) 1.translate3d 在浏览器中,y轴正方向垂直 ...
十五、CSS 3新特性详解（三）——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style
HTML5 第三天一. 认识 3D 转换 3D 的特点近大远小物体和面遮挡不可见三维坐标系 x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 – 注意:y 轴下面是正 ...
CSS高级功能—3D空间转换（位移、透视、空间旋转）—3D导航—3D缩放
一.空间(3D)转换目标:使用transform属性实现元素在空间内的位移.旋转.缩放等效果. 属性:transform (1)位移效果(Z轴方向需要配合perspective透视使用) 空间位移的 ...
移动Web【空间转换[空间位移、透视、空间旋转、立体呈现、3D导航、空间缩放]、动画、综合案例】
文章目录一.空间转换 1.1 空间位移 1.2 透视 1.3 空间旋转 1.4 立体呈现 1.5 3D导航 1.6 空间缩放二.动画 2.1 动画的实现步骤 2.2 动画属性三.综合案例 2.1 ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
3D空间转换（位移、旋转、立体呈现）
重点语法: transform:translateX(值);沿x轴位移,y.z轴同理. transform:rotateX(值);沿x轴旋转,y.z轴同理. perspective: 像素单位数值;实 ...
web前端基础 html5+css3（十二.2D转换，动画，3D转换）
一.2D转换 1.2D转换之移动translate (1)transform:translate(x,y); transform:translate(100px,100px); (2)transfor ...
css3 3d perspective,CSS 3D transforms系列教程-Perspective
CSS 3D transforms的出现已经有好几年的历史了,但是由于缺乏浏览器的广泛支持,它一直没有得到广泛的应用.这个系列教程旨在让更多的童鞋了解和使用CSS 3D transforms. 要将一 ...
CSS3：3D旋转rotate3d及3D呈现transform-style
3D旋转指可以让元素在三维平面内沿着x轴,y轴,z轴或自定义轴进行旋转. 语法格式: transform:rotateX(45deg);沿着x轴正方向旋转45度: transform:rotateY( ...
3D移动translate3d（CSS3）
3D移动translate3d(CSS3) <!DOCTYPE html> <html lang="en"><head><meta cha ...

CSS3 3D移动（translate3d）、透视（perspective）、3D旋转（rotate3d）、3D呈现（transform-style）

3D移动translate3d

透视perspective

3D旋转rotate3d

3D呈现transform-style

CSS3 3D移动（translate3d）、透视（perspective）、3D旋转（rotate3d）、3D呈现（transform-style）相关推荐

最新文章

热门文章