CSS 图片的旋转rotate旋转属性（一）

作者: Kkite | 来源:发表于2019-11-27 22:57 被阅读0次

CSS 图片的旋转rotate旋转属性（一）
css3 实现360度无线旋转
css3-transform
CSS3属性transform详解
css3常用的动画属性说明
web前端入门到实战：css3属性transform-origi
web前端入门到实战：css3属性transform-origi
CSS下镜像翻转（水平/垂直翻转）
CSS3知识概要之变形与动画(三)
CSS&SVG里的各种角度总结

poker1.gif

1.属性介绍

属性transform：rotate();为让图片2D旋转的属性
下面为实现上面图片的案例代码

<!DOCTYPE html>
<html>
<head>
    <title>旋转</title>
    <style type="text/css">
        img{
            margin: 100px;
            transition: all 0.6s;                         /*过渡时间为0.6秒*/
            <!-- 旋转参考点： -->
            /*transform-origin: center center;           /*默认值*/
            /*transform-origin: top left;*/
            /*transform-origin: 20px 30px;*/
        }
        img:hover{
            transform: rotate(360deg);    /*deg为旋转度数*/
        }
    </style>
</head>
<body>
    <img src="./pokerK.jpg" width="200" alt="">
    <img src="./pokerJ.jpg" width="200" alt="">
    <img src="./pokerQ.jpg" width="200" alt="">
</body>
</html>

2. 旋转相册

案例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div{
            width: 220px;
            height: 310px;
            position: relative;
            border: 1px solid pink;
            margin: 300px 300px;
            float: left;
        }
        .div2{
            margin: 300px 300px;
            float: left;
        }
        .div2 img{
            transform-origin: center center;              /*右边扑克中心旋转*/
        }
        div img{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.6s;
            transform-origin: top right;                  /*左边扑克绕右上角旋转*/
        }
           /*下面为每张图片设置需要旋转的度数*/
        div:hover img:nth-child(1){
            transform: rotate(60deg);
        }
        div:hover img:nth-child(2){
            transform: rotate(120deg);
        }
        div:hover img:nth-child(3){
            transform: rotate(180deg);
        }
        div:hover img:nth-child(4){
            transform: rotate(240deg);
        }
        div:hover img:nth-child(5){
            transform: rotate(300deg);
        }
        div:hover img:nth-child(6){
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="./pokerJ2.jpg" alt="">
        <img src="./pokerQ2.jpg" alt="">
        <img src="./pokerK2.jpg" alt="">
        <img src="./pokerJ.jpg" alt="">
        <img src="./pokerQ.jpg" alt="">
        <img src="./pokerK.jpg" alt="">
    </div>
    <div class="div2">
        <img src="./pokerJ2.jpg" alt="">
        <img src="./pokerQ2.jpg" alt="">
        <img src="./pokerK2.jpg" alt="">
        <img src="./pokerJ.jpg" alt="">
        <img src="./pokerQ.jpg" alt="">
        <img src="./pokerK.jpg" alt="">
    </div>
</body>
</html>

效果图：