HTML+CSS:transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放

文章目录

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

transform: translate3d(x, y, z)

HTML+CSS:transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放_第1张图片
语法

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

取值(正负均可)

  • 像素单位数值
  • 百分比

HTML+CSS:transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放_第2张图片

使用perspective属性实现透视效果

HTML+CSS:transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放_第3张图片
HTML+CSS:transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放_第4张图片

HTML+CSS:transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放_第5张图片

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

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

HTML+CSS:transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放_第6张图片

空间旋转-Z轴
在这里插入图片描述

空间旋转-X轴:需配上透视效果
HTML+CSS:transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放_第7张图片

空间旋转-Y轴:需配上透视效果
HTML+CSS:transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放_第8张图片

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

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

  • 父元素添加 transform-style: preserve-3d;
  • 使子元素处于真正的3d空间
    HTML+CSS:transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放_第9张图片

实现立体cube
HTML+CSS:transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放_第10张图片

scale实现空间缩放效果

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

你可能感兴趣的:(HTML5+CSS,3d,css,html)