HTML5:七天学会基础动画网页10

继续介绍 3D 转换:

3D 转换:rotate3d

方法与说明

rrotateX(angle)otate3d(x,y,z,angle[ 角度])   

3D 转换，正常取值 0 /1，0 代表当前轴线不进行旋转，1 反之，例:rotate3d(1,1,1,30deg)，代表三个轴线都要旋转 30 度 rotate3d(0,1,1,30deg) 代表 X 轴不旋转，Y,Z 轴旋转 30 度。

rotateX(angle)      3D 转换，X 轴的值。

rotateY(angle)      3D 转换，Y 轴的值。

rotateZ(angle)      3D 转换，Z 轴的值。

改变旋转点

transform-origin:x-axis y-axis z-axis；

x-axis: 定义视图被置于 X 轴的何处，可能的值             left,center,right,length,%

y-axis: 定义视图被置于 Y 轴的何处，可能的值            top,center,bottom,length,%

z-axis: 定义视图被置于 Z 轴的何处，可能的值

          length, 眼睛看到屏幕的距离

例:transform-origin:right top 0px；

transform-style 属性

(谁要呈现 3D 效果就写在其父元素上)

flat                   子元素将不保留其 3D 效果

preserve-3d    子元素将保留其 3D 效果

perspective-origin 属性

视角，改变观察位置，(一般不调整，因为可能影响原比例)

perspective-origin:x-axis y-axis；

x-axis: left,center,right,length,%默认值:50%

y-axis:top,center,bottom,length,% 默认 50%

看了这么多，那我们来写一个交叉的平面例子:

        *{

            margin: 0;

            padding: 0;

        }

    body{

         /* 没有视距没有立体效果 */

       perspective: 1000px;

    }

    .box{

        width: 300px;

        height: 300px;

        border: 1px solid black;

        margin: 100px auto;

        padding: 10px;

        position: relative;

        /* 写在父元素上保留 3D 效果 */

        transform-style: preserve-3d;

    }

    .a,.b{

        /* w 和 h 不用 100%，因为会继承父元素 padding 值而脱标 */

        width: 300px;

        height: 300px;

        background-color: seagreen;

        position: absolute;

    }

    .b{

        background-color: skyblue;

        transform: rotateX(60deg);

    }

    .box:hover{

        transform: rotateY(60deg);

        /* 加一个过渡，使放置变化在两秒中完成 */

        transition: all 2s;

    }

 上面添加了一个过渡效果，放置后就会在设置的时间内完成要求，这个过渡后面会仔细说