旋转轴心案例

Posted 2021-01-30 lujieting

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了旋转轴心案例相关的知识，希望对你有一定的参考价值。

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .pkBox{
            width: 155px;
            height: 219px;
            margin: 200px auto;
            position: relative;
        }
        .pkBox>img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            transition: transform 2s;
            transform-origin: right top;
        }
        .pkBox:hover>img:nth-of-type(1){
            transform: rotate(60deg);
        }
        .pkBox:hover>img:nth-of-type(2){
            transform: rotate(120deg);
        }
        .pkBox:hover>img:nth-of-type(3){
            transform: rotate(180deg);
        }
        .pkBox:hover>img:nth-of-type(4){
            transform: rotate(240deg);
        }
        .pkBox:hover>img:nth-of-type(5){
            transform: rotate(300deg);
        }
        .pkBox:hover>img:nth-of-type(6){
            transform: rotate(360deg);
        }

    </style>
</head>
<body>
<div class="pkBox">
    <img src="images/img/pk1.png" >
    <img src="images/img/pk2.png" >
    <img src="images/img/pk1.png" >
    <img src="images/img/pk2.png" >
    <img src="images/img/pk1.png" >
    <img src="images/img/pk2.png" >
</div>

以上是关于旋转轴心案例的主要内容，如果未能解决你的问题，请参考以下文章

如何设置 pygame.transform.rotate() 的轴心点（旋转中心）？

Scratch画图100例图45-scratch绘制多层旋转三角形少儿编程 scratch编程画图案例教程考级比赛画图集训案例