首页 前端知识 HTML5:七天学会基础动画网页10

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

2024-06-17 09:06:42 前端知识 前端哥 749 935 我要收藏

继续介绍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%

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

<style>

        *{

            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;

    }

    </style>

</head>

<body>

    <div class="box">

    <div class="a"></div>

    <div class="b"></div>

    </div>

   </body>

d67f605a8bd044d2a25ebba01df06564.png

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

8715062dc3b44079b1d2edde985ea5cd.png

 

 

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12466.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!