transform3D旋转

3D旋转在2D旋转的基础上增加了第三条坐标轴-Z轴,Z轴位置与视线方向相同,在2D空间内看不到Z轴的变化,可以添加透视属性perspective实现透视效果,透视属性需要给父级元素添加,取值为像素单位,建议的单位区间为800px-1200px。

透视的距离为视距,就是人眼到屏幕的距离,有近大远小,近实远虚的效果。

添加了透视属性就可以看到Z轴的变化,Z轴的取值为正值表示离人眼的距离近,负值相反。

3D旋转语法:

1、综合写法:

transform:rotate3d(x,y,z,角度度数)

                                                          x、y、z的取值为0-1之间,角度单位为deg

.box {
            width: 400px;
            height: 400px;
            margin: 100px auto;
            perspective: 600px;
        }
        .box img {
            width: 100%;
            height: 100%;
            transition: all 1s;
        }
        .box:hover img {
            /* 3d旋转综合写法*/
            /* x,y,z轴取值为0-1,角度度数,0-1角度度数范围 */
            transform: rotate3d(0.5,0.5,0.5,90deg);
        }

2、单独写法:transform:rotateZ( 值 );   

                                        取值为正数为顺时针旋转,负数逆时针,单位使用角度单位 

你可能感兴趣的:(3d,css3,html5)