2019.4.24 扑克牌旋转练习

Posted lzb1234

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2019.4.24 扑克牌旋转练习相关的知识,希望对你有一定的参考价值。

效果图:

技术图片

代码:


                        .div2 {
                width: 100px;
                margin: 200px auto;
                position: relative;
                
                
            }
            .div2 img{
                width: 100px;
                position: absolute;
                left: 0;
                top:0;
                transform-origin: center top;
                transition: all 1s;
            }
            .div2:hover .img1 {
                transform: rotate(60deg);
            }
            .div2:hover .img2 {
                transform: rotate(120deg);
            }
            .div2:hover .img3 {
                transform: rotate(180deg);
            }
            .div2:hover .img4 {
                transform: rotate(240deg);
            }
            .div2:hover .img5 {
                transform: rotate(300deg);
            }
            .div2:hover .img6 {
                transform: rotate(360deg);
            }




                <div class="div2">
            <img src="img/laok.png" class="img1"/>
            <img src="img/laok.png" class="img2"/>
            <img src="img/laok.png" class="img3"/>
            <img src="img/laok.png" class="img4"/>
            <img src="img/laok.png" class="img5"/>
            <img src="img/laok.png" class="img6"/>
        </div>

图片:
技术图片

以上是关于2019.4.24 扑克牌旋转练习的主要内容,如果未能解决你的问题,请参考以下文章

屏幕旋转后Android片段重叠

片段着色器中的OpenGL点精灵旋转

处理屏幕旋转上的片段重复(带有示例代码)

使用 ActionBar 旋转 Android 的双片段

Butterknife 片段旋转给出 NullPointer

java斗地主扑克 扑克牌 洗牌 发牌 Collection 集合练习