admin管理员组

文章数量:1130349

perspective:透视；像素（单位）     

3d变换需要透视，透视要加在观察元素的父盒子上

【透视的值越小会越明显】

rotate():旋转；rotateX()、rotateY()、rotateZ()、rotate3d()

rotate3d(1,1,0,90deg) 以原点(0,0,0)到(1,1,0)两点的连线为轴线旋转90度

<style>
    div{
        perspective:200px;
        width:200px;
        height:200px;
        margin:100px auto;
    }
    img{
        display:block;
        width:200px;
        border-radius:30%;
        transition:all 0.5s;
    }
    img:hover{
        transform:rotateX(180deg);
        /*transform: rotate3d(1, 0, 0, 180deg);*/
        /*transform: rotateY(180deg);*/
        /*transform: rotate3d(0, 1, 0, 180deg);*/
        /*transform: rotateZ(180deg);*/
        /*transform: rotate3d(0, 0, 1, 180deg);*/
        /*transform: rotate3d(-1, 1, 0, 180deg);*/
    }
</style>
<div> <img src="img/nazha.jpg" alt=""> </div>

perspective:透视；像素（单位）     

3d变换需要透视，透视要加在观察元素的父盒子上

【透视的值越小会越明显】

rotate():旋转；rotateX()、rotateY()、rotateZ()、rotate3d()

rotate3d(1,1,0,90deg) 以原点(0,0,0)到(1,1,0)两点的连线为轴线旋转90度

<style>
    div{
        perspective:200px;
        width:200px;
        height:200px;
        margin:100px auto;
    }
    img{
        display:block;
        width:200px;
        border-radius:30%;
        transition:all 0.5s;
    }
    img:hover{
        transform:rotateX(180deg);
        /*transform: rotate3d(1, 0, 0, 180deg);*/
        /*transform: rotateY(180deg);*/
        /*transform: rotate3d(0, 1, 0, 180deg);*/
        /*transform: rotateZ(180deg);*/
        /*transform: rotate3d(0, 0, 1, 180deg);*/
        /*transform: rotate3d(-1, 1, 0, 180deg);*/
    }
</style>
<div> <img src="img/nazha.jpg" alt=""> </div>

本文标签： 基础WEBtransformperspectiverotate

版权声明：本文标题：web基础·transform:rotate()搭配perspective实现3D旋转 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1758712702a2783209.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。