zoukankan      html  css  js  c++  java
  • transform:rotate3d/tranlate3d

    transform:rotate3d(x,y,z,angle);

    rotate3d 代表 在3D空间,元素沿着 经过原点(0,0,0) 和 三维坐标(x,y,z) 2点的直线进行旋转。其中:

    • x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
    • y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
    • z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
    • angle:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。

    衍生 3个属性分别为:

      • rotateX(angle)
        指定沿著 x 軸根據指定角度的順時針方向旋轉。
        相当于 rotate(1,0,0,angle);
      • rotateY(angle)
        指定沿著 y 軸根據指定角度的順時針方向旋轉。
        相当于 rotate(0,1,0,angle);
      • rotateZ(angle)
        指定沿著 z 軸根據指定角度的順時針方向旋轉。
        相当于 rotate(0,0,1,angle);
    @keyframes huang {
                20% {
                    -webkit-transform: rotate3d(0,0,1,15deg);
                    transform: rotate3d(0,0,1,15deg);
                }
                40% {
                    -webkit-transform: rotate3d(0,0,1,-10deg);
                    transform: rotate3d(0,0,1,-10deg);
                }
                60% {
                    -webkit-transform: rotate3d(0,0,1,5deg);
                    transform: rotate3d(0,0,1,5deg);
                }
                80% {
                    -webkit-transform: rotate3d(0,0,1,-5deg);
                    transform: rotate3d(0,0,1,-5deg);
                }
                100% {
                    -webkit-transform: rotate3d(0,0,1,0deg);
                    transform: rotate3d(0,0,1,0deg);
                }
            }

    transform:translate3d(x,y,z) x,y,z平移的距离

  • 相关阅读:
    HTTP状态码的详细解释,供参考
    js中实现页面跳转(返回前一页、后一页)
    CRUD工程师——基础容器LinkedList
    CRUD工程师——基础容器ArrayList
    Servlet入门
    Linux
    flex弹性布局
    div布局
    递归函数
    运算符
  • 原文地址:https://www.cnblogs.com/yangqing22/p/6589694.html
Copyright © 2011-2022 走看看