admin管理员组

文章数量:1530294

文章目录

  • transform: translate3d(x, y, z)
  • 使用perspective属性实现透视效果
  • transform: rotateXYZ实现元素空间旋转效果
  • transform-style: preserve-3d呈现立体图形
  • scale实现空间缩放效果

transform: translate3d(x, y, z)


语法

transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);

取值（正负均可）

  • 像素单位数值
  • 百分比

使用perspective属性实现透视效果


transform: rotateXYZ实现元素空间旋转效果

  • transform: rotateZ(值);
  • transform: rotateX(值);
  • transform: rotateY(值);

空间旋转-Z轴

空间旋转-X轴：需配上透视效果

空间旋转-Y轴：需配上透视效果

  • rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
  • x，y，z 取值为0-1之间的数字

transform-style: preserve-3d呈现立体图形

  • 父元素添加 transform-style: preserve-3d;
  • 使子元素处于真正的3d空间

实现立体cube

scale实现空间缩放效果

  • transform: scaleX(倍数);
  • transform: scaleY(倍数);
  • transform: scaleZ(倍数);
  • transform: scale3d(x, y, z)

本文标签： 空间立方体位移缩放透视

版权声明：本文标题：HTML+CSS：transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转立方体、scale3d空间缩放 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1725895038a1047535.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。