CSS学习笔记-2D转换使扑克牌扇形排列

前端Richard

已于 2022-03-01 20:47:20 修改

阅读量639

点赞数

文章标签： html 前端

于 2022-03-01 20:37:41 首次发布

本文链接：https://blog.csdn.net/m0_57185539/article/details/123187359

版权

学习目标：

通过展开扑克牌这个小demo熟悉CSS3的2D转换属性

学习内容：

2D转换用到的CSS属性是transform，属性值为translate（平移），rotate（旋转），scale（缩放），skew（倾斜），一般用不到skew。

1，translate语法

translateX: 操纵在x轴上位移，当取值为正时，元素向右移动，取值为负时，元素向左移动。例如：translateX:10px;表示元素向右移动10px,translateX:-10px;表示元素向左移动10px，除了具体像素值外，还可以取百分比数值，需要注意的是这个百分比指的是元素自身大小的百分比，translateX:50%;元素将向右移动自身大小的50%。

transY:操纵元素在y轴上位移，取值范围与translateX相同，正值为上，负值为下。

translate:复合写法，第一个值是translateX，第二个值是translateY。

2，rotate 语法

rotateX：操纵元素绕X轴进行旋转，可类比于体操运动中的单杠旋转，rotateX(360deg)可以使元素绕X轴旋转一周。

rotateY：操纵元素绕Y轴进行旋转，可类比于舞蹈中的钢管舞，rotateY(360deg)可以使元素绕Y轴旋转一周。

rotate：操纵元素绕原点进行旋转，默认为元素中心，旋转点可通过transform-origin设置原点位置，rotate（360deg）表示元素绕原点顺时针旋转360度。

transform-origin：在2D变换中，可用来设置旋转的原点，可以取具体值，也可以用关键字，transform-origin：10px 20px；表示旋转起点位于元素中心点右边10px，向上20px的位置，transform-origin：center center；是默认值，旋转点在元素中心。

3，scale语法（2D）

设置单一的数值，将同时作用于X轴和Y轴，让该元素进行缩放。

设置两个值，第一个值代表X轴的缩放倍数，第二个代表Y轴的缩放倍数。

当值大于一时，元素将会被放大，小于1则缩小，等于1时相当于没设。

实操案例

1，需求分析

我们需要在这个案例当中同时使用translate，rotate和scale这三个属性。现在的需求是：

初始状态下十三张牌并排展示
当鼠标移入时，13张牌合并在屏幕中间
当合并完成时，纸牌放大并呈扇形展开，整体向下移动

2，代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            font-size: 0;
            /*去掉图片的默认间距*/
            position: relative;
            margin: auto;
            width: 1300px;
            height: 100px;
            transition: transform 2s 2s;/*延时等待牌组全部居中后，在下落时完成放大缩放旋转的操作*/
        }
        /* 定位 */
        img {
            position: absolute;
            left: 0;
            width: 100px;
            height: 140px;
            transform-origin: left bottom;
            transition: left 2s,transform 2s 2s;
        }

        img:nth-child(2) {
            left: 100px;
        }

        img:nth-child(3) {
            left: 200px;
        }

        img:nth-child(4) {
            left: 300px;
        }

        img:nth-child(5) {
            left: 400px;
        }

        img:nth-child(6) {
            left: 500px;
        }

        img:nth-child(7) {
            left: 600px;
        }

        img:nth-child(8) {
            left: 700px;
        }

        img:nth-child(9) {
            left: 800px;
        }

        img:nth-child(10) {
            left: 900px;
        }

        img:nth-child(11) {
            left: 1000px;
        }

        img:nth-child(12) {
            left: 1100px;
        }

        img:nth-child(13) {
            left: 1200px;
        }
        /* 旋转，缩放 */
        .box:hover img:nth-child(1) {
            transform: rotate(-60deg) scale(1.2);
        }

        .box:hover img:nth-child(2) {
            transform: rotate(-50deg) scale(1.2);
        }

        .box:hover img:nth-child(3) {
            transform: rotate(-40deg) scale(1.2);
        }

        .box:hover img:nth-child(4) {
            transform: rotate(-30deg) scale(1.2);
        }

        .box:hover img:nth-child(5) {
            transform: rotate(-20deg) scale(1.2);
        }

        .box:hover img:nth-child(6) {
            transform: rotate(-10deg) scale(1.2);
        }
        .box:hover img:nth-child(7) {
            transform: scale(1.2);
        }
        .box:hover img:nth-child(8) {
            transform: rotate(10deg) scale(1.2);
        }

        .box:hover img:nth-child(9) {
            transform: rotate(20deg) scale(1.2);
        }

        .box:hover img:nth-child(10) {
            transform: rotate(30deg) scale(1.2);
        }

        .box:hover img:nth-child(11) {
            transform: rotate(40deg) scale(1.2);
        }

        .box:hover img:nth-child(12) {
            transform: rotate(50deg) scale(1.2);
        }

        .box:hover img:nth-child(13) {
            transform: rotate(60deg) scale(1.2);
        }
        .box:hover img {
            left: 700px;
        }
        /* 让容器携带元素整体位移 */
        .box:hover{
            transform: translateY(200px);
        }
    </style>

<body>
    <div class="box">
        <img src="image/images/c-1.png" alt="">
        <img src="image/images/c-2.png" alt="">
        <img src="image/images/c-3.png" alt="">
        <img src="image/images/c-4.png" alt="">
        <img src="image/images/c-5.png" alt="">
        <img src="image/images/c-6.png" alt="">
        <img src="image/images/c-7.png" alt="">
        <img src="image/images/c-8.png" alt="">
        <img src="image/images/c-9.png" alt="">
        <img src="image/images/c-10.png" alt="">
        <img src="image/images/c-11.png" alt="">
        <img src="image/images/c-12.png" alt="">
        <img src="image/images/c-13.png" alt="">
    </div>
</body>

</html>

3.效果展示