transform

最新推荐文章于 2024-01-21 23:14:28 发布

AChievemeniT

最新推荐文章于 2024-01-21 23:14:28 发布

阅读量173

点赞数 1

分类专栏：刚好在学文章标签： css html

本文链接：https://blog.csdn.net/AChievemeniT/article/details/107821000

版权

刚好在学专栏收录该内容

41 篇文章 0 订阅

订阅专栏

transform(变形属性)

translate : 位移
    translateX
    translateY
    translateZ   ( 3d )

scale : 缩放 （**值是一个比例值，正常大小就是1，会已当前元素中心点进行缩放**）
    scaleX
    scaleY
    scaleZ   (3d)

rotate : 旋转 （ **旋转的值，单位是角度 deg** ）
    rotateX  (3d)
    rotateY  (3d)
    rotateZ  ( **和rotate是等级关系，那正值按顺时针旋转，负值按逆时针旋转** )

skew : 斜切
    skewX : **单位也是角度，正值向左倾斜，负值向右倾斜**
    skewY

transform的注意事项：
    1. 变形操作不会影响到其他元素。
    2. 变形操作只能添加给块元素，但是不能添加给内联元素。
    3. 复合写法，可以同时添加多个变形操作。
        执行是有顺序的，先执行后面的操作，再执行前面的操作。
        translate会受到 rotate、scale、skew的影响
    4. transform-origin : 基点的位置
        x y z(3d）

加粗样式

<style>
        *{margin: 0px;padding: 0px;}
        ul{list-style: none;}
        .box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;perspective: 200px;perspective-origin: left top;}
        .box1 ul{width: 100px;height: 100px;background: red;margin: 100px;position: relative;transform-style: preserve-3d;transition: 2s;transform-origin: center center -50px;transform: scaleZ(2);}
        .box1 ul li{width: 100%;height: 100%;position: absolute;line-height: 100px;text-align: center;color: white;font-size: 26px;opacity: 0.5;backface-visibility: hidden;}
        .box1 ul li:nth-child(1){background: red;left: 0px;top: 0px;}
        .box1 ul li:nth-child(2){background:blue;left: 100px;top: 0px;transform: rotateY(90deg);transform-origin: left;}
        .box1 ul li:nth-child(3){background:yellow;left: -100px;top: 0px;transform: rotateY(-90deg);transform-origin: right;}
        .box1 ul li:nth-child(4){background:green;left: 0px;top: -100px;
        transform: rotateX(90deg);transform-origin: bottom;}
        .box1 ul li:nth-child(5){background:pink;left: 0px;top: 100px;
            transform: rotateX(-90deg);transform-origin: top;}
        .box1 ul li:nth-child(6){background:gray;left: 0px;top: 0px;transform: translateZ(-100px) rotateY(180deg);}
        .box1:hover ul{transform:rotateY(180deg);}

        
    </style>