2019.4.24 扑克牌旋转练习

柔情只为你懂 2021-12-13 01:25 193阅读 0赞

效果图：

![925370-20190426191230252-439269432.gif][]

代码：

.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>

图片:  
![925370-20190426191424112-1841990350.png][]

转载于:https://www.cnblogs.com/lzb1234/p/10776099.html

[925370-20190426191230252-439269432.gif]: /images/20211210/bb40f9e9f3b84403827b69795d774d4f.png
[925370-20190426191424112-1841990350.png]: /images/20211210/0bf7ec6ab0b2426ba223015a7fcd491f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，193人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3扑克牌2D旋转

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>扑...

￡神魔★判官ぃ/ 2024年04月18日 16:59/ 0 赞/ 115 阅读

相关 leetcode算法练习【81】搜索旋转排序数组 II

文章目录所有题目源代码：\[Git地址\](https://github.com/ch98road/leetcode)

古城微笑少年丶/ 2023年02月12日 02:25/ 0 赞/ 70 阅读

相关扑克牌大小

题目信息扑克牌游戏大家应该都比较熟悉了，一副牌由54张组成，含3~A、2各4张，小王1张，大王1张。牌面从小到大用如下字符和字符串表示（其中，小写joker表示小王，大

约定不等于承诺〃/ 2022年11月05日 08:56/ 0 赞/ 207 阅读

相关 CSS3练习之时钟计时器，3D旋转

1、时钟计时效果（计时器）模拟时钟从00:00:00开始转动计时 ![这里写图片描述][SouthEast] clock.html <!doctype h

た入场券/ 2022年07月11日 01:48/ 0 赞/ 285 阅读

相关扑克牌顺子

题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张\_)…他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺

待我称王封你为后i/ 2022年03月31日 07:38/ 0 赞/ 217 阅读

相关扑克牌顺子

何海涛：《剑指Offer：名企面试官精讲典型编程题》：九度OJ 题目描述： [http://ac.jobdu.com/problem.php?cid=1039&pid=28]

短命女/ 2022年03月20日 03:31/ 0 赞/ 236 阅读

相关扑克牌顺子

时间限制：1秒空间限制：32768K 热度指数：153346 本题知识点： [字符串][Link 1] [ 算法知识视频讲解][Link 2] 题目描述 LL今天

末蓝、/ 2022年03月08日 01:50/ 0 赞/ 238 阅读

相关扑克牌顺子

题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^\_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能

灰太狼/ 2022年02月01日 13:15/ 0 赞/ 273 阅读

相关【three.js练习程序】旋转、缩放场景

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

╰+攻爆jí腚メ/ 2021年12月16日 10:53/ 0 赞/ 370 阅读

相关 2019.4.24 扑克牌旋转练习

效果图： ![925370-20190426191230252-439269432.gif][] 代码： .div2 {

柔情只为你懂/ 2021年12月13日 01:25/ 0 赞/ 193 阅读