网店网站设计论文,网站建设价格请咨询兴田德润,质量最好的购物平台,苏州建网站公司选苏州聚尚网络导语 在上一章节中#xff0c;我们分享了2D 变换的效果#xff0c;也分享了一些案例#xff0c;同时#xff0c;既然有2D 变换#xff0c;那么也就肯定有 3D 变换 那么本章节#xff0c;就为大家带来有关3D 变换的分享. 文章目录 开启3D空间设置景深透视点位置3D 位移3D …导语 在上一章节中我们分享了2D 变换的效果也分享了一些案例同时既然有2D 变换那么也就肯定有 3D 变换 那么本章节就为大家带来有关3D 变换的分享. 文章目录 开启3D空间设置景深透视点位置3D 位移3D 旋转3D 缩放多重变换背部可见性 开启3D空间 重要原则元素进行 3D 变换的首要操作必须要为其父元素开启 3D 空间 transform-style: preserve-3d; /*为其父元素开启 3D 空间*/设置景深
概念 何为景深—— 指定观察者与 z0 平面的距离能让发生 3D 变换的元素产生立体透视效果看来更加立体 transform-style: preserve-3d; /*为其父元素开启 3D 空间*/
perspective: 700px; /*并且自定义设置一个景深*/初步案例
div classboxdiv3D变换/div
/div.box {width: 600px;height: 600px;border: 1px solid;margin: 0 auto;margin-top: 105px;transform-style: preserve-3d; /*为其父元素开启 3D 空间*/perspective: 700px; /*并且自定义设置一个景深*/div {width: 600px;height: 600px;font-size: 25px;background-color: #5693af;transform: rotatex(53deg);}
}立体效果 透视点位置 所谓透视点位置就是观察者位置默认的透视点在当前开启3D 元素的正中心 取值范围
属性取值perspective-originx轴距离 y轴距离 x轴百分比 y轴百分比; 默认观察源为 50% 50%方位单词1 方位单词2; 方位单词top、bottom、center、left、right
注意
若只设置了一个值则第二个值默认为 50% 3D 位移 3D 位移是在 2D 位移的基础上可以让元素沿 z 轴位移具体使用方式如下 先给元素添加 转换属性 transform编写 transform 的具体值 3D 位移 相关可选值如下
属性值描述translateZ设置 z 轴位移需指定长度值正值向屏幕外负值向屏幕里且不能写 百分比translate3d第1个参数对应 x 轴第2个参数对应 y 轴第3个参数对应 z 轴且均不能省略
transform: translate3d(105px, 136px, 95px);3D 旋转 3D 旋转是在 2D 旋转的基础上可以让元素沿 x 轴和 y 轴旋转具体使用方式如下 先给元素添加 转换属性 transform编写 transform 的具体值 3D 旋转 相关可选值如下
属性值描述rotateX设置 x 轴旋转角度需指定一个角度值( deg )面对 x 轴正方向正值顺时针负值逆时针rotateY设置 Y 轴旋转角度需指定一个角度值( deg )面对 Y 轴正方向正值顺时针负值逆时针rotateZ设置 Z 轴旋转角度需指定一个角度值( deg )面对 Z 轴正方向正值顺时针负值逆时针rotate默认等同于rotateZrotate3d接收 4个参数前 3 个参数分别表示坐标轴 x , y , z 第 4 个参数表示旋转的角度值deg参数不允许省略
transform: rotate3d(1,1,1,30deg); 表示X轴、 Y轴 、 Z轴 分别旋转30 度 3D 缩放 3D 缩放是在 2D 缩放的基础上可以让元素沿 z 轴缩放具体使用方式如下 先给元素添加 转换属性 transform编写 transform 的具体值 3D 缩放 相关可选值如下
属性值描述scaleZ设置 z 轴方向的缩放比例值为一个数字 1 表示不缩放大于 1 放大小于 1 缩小scale3d接收3个参数第1个参数对应 x 轴第2个参数对应 y 轴第3个参数对应 z 轴参数不允许省略
值得注意 由于HTML 元素没有厚度所以当设置 Z轴 缩放的时候实际上是改变的景深值 多重变换 多个变换可以同时使用一个 transform 来集中式编写 transform: translateZ(100px) scaleZ(3) rotateY(40deg);背部可见性 使用 backface-visibility 指定元素背面在面向用户时是否可见常用值如下 属性值描述visible指定元素背面可见允许显示正面的镜像。—— 默认值hidden指定元素背面不可见 ♂️ 博主座右铭向阳而生我还在路上 —————————————————————————————— 博主想说将持续性为社区输出自己的资源同时也见证自己的进步 —————————————————————————————— ♂️ 如果都看到这了博主希望留下你的足迹【收藏点赞✍️评论】 ——————————————————————————————
