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平移的距离

  • 相关阅读:
    算法学习——贪心篇
    Centos7下搭建LAMP环境,安装wordpress(不会生产博客,只是一名博客搬运工)(菜鸟)
    小白创建网站的曲折之路
    7.2.5 多层嵌套的if语句
    7.2.4 else与if配对
    7.2.3
    7.4 electirc.c -- 计算电费
    oracle数据库命令行查看存储过程
    Linux下如何查看进程准确启动时间
    7.2 if else 语句
  • 原文地址:https://www.cnblogs.com/yangqing22/p/6589694.html
Copyright © 2011-2022 走看看