css基础笔记十一:css3新特性,动画效果之转换

本文链接：https://blog.csdn.net/qq_55006020/article/details/140292836

转换

可以单依靠css 不需要js就可以实现动画效果.

关键字:transform

转换的效果可以某个元素改变形状,大小,位置

2d转换 transform属性

1,平移

根据左上角左边x轴和顶部y轴的位置给出的坐标轴

transfrom:translate(50px,100px)

演示案例

<body>
<p class="p2">我是一个字体</p>
<p class="p1">我是一个字体</p>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>


</body>

css 平移案例

       div{
            margin: 50px;
        }
        .box{
            width: 200px;
            height: 300px;
            background-color: pink;
            /*更改图片位置调整*/
            transform: translate(10px,20px);
        }

2,旋转

rotate() 方法给定一个度数,顺时针旋转,如果这个值是负数,那么就是逆时针旋转

css演示代码

        .box1{
            width: 200px;
            height: 300px;
            background-color: pink;
            /*!*更改倾斜度*!*/
            transform: rotate(-45deg);
        }

效果

3,放大/缩小

scale() 方法

元素增加或者减小的大小取决于元素的宽度和高度的参数

值是倍数

缩放还可以实现吧谷歌浏览器默认的最小12px 缩放到更小比如6px

css代码案例放大案例

        .box2{
            width: 200px;
            height: 300px;
            background-color: pink;
        /*    实现缩放和放大*/
        /*    放大  可以传入2个值，对应x和y 如果是一个值就是全部*/
            transform: scale(1.5,2);
        }

效果成功把高度300px 直接放大了2倍

对字体修改案例

        .p1{
            font-size: 12px;
            /*可以看到通过缩放，可以使这个字体直接缩放到小了很多*/
            transform: scale(0.5);
        }
        .p2{
            font-size: 12px;
        }

默认的最小字体是12px 通过缩放成功吧字体变成更小的6px了

3D转换 transform属性

1,倾斜翻转

使用skew()方法

里面有2个参数分别代表x轴和y轴翻转的角度如果参数是空默认为0 如果是负数则表示是相反的方向

<div class="box"> <p>我是一个我文本</p></div>
<div class="box1"> <p>我是一个我文本1</p></div>
<div class="box2"> <p>我是一个我文本2</p></div>
<div class="box3"> <p>我是一个我文本2</p></div>
<div class="box4"> <p>我是一个我文本3</p></div>

css

        div{
            margin: 100px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
            /*单独x倾斜*/
            transform: skew(20deg);
        }

效果

css

        .box1{
            width: 100px;
            height: 100px;
            background-color: pink;
            /*x轴和y轴一起倾斜*/
            transform: skew(20deg,30deg);
        }

2,水平或者垂直翻转

使用rotateX() 和rotateY()函数

x是上下翻转,y是左右翻转

        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
            /*3d倾斜 x轴*/
            transform: rotateX(20deg);
        }

效果

css

        .box3{
            width: 100px;
            height: 100px;
            background-color: pink;
            /*3d倾斜 Y轴*/
            transform: rotateY(10deg);
        }

3,三轴变换

使用 translate3d() 函数

里面有三个参数分别代表x轴y轴z轴

示例鼠标悬停的时候改变其三轴变换

    /*    实战运用最多的一个效果，鼠标悬停，元素上划的动画效果
    transform: translate3d(0,-2px,0);
                           x  y  z
    */
        .box4{
            width: 100px;
            height: 100px;
            background-color: pink;

        }
        .box4:hover{
            /*添加阴影*/
            box-shadow: 0 0 15px 15px red;
            /*设置3d效果*/
            transform: translate3d(0,-10px,0);
        }