CSS3得2D学习只是_前端css3 2d有必要学嘛-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43712187/article/details/110532535

文章目录

一、CSS3转换

CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸

二、浏览器兼容

1）Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

2）Chrome 和 Safari 需要前缀 -webkit-。

3）Internet Explorer 9 需要前缀 -ms-

三、2d转换如何使用

transform：translate（）平移，roate（）旋转，scale（）缩放，skew（）拉伸，matrix（）组合技

3.1、translate（X,Y）使得元素平移

X轴平移，左边为负，右边为正
Y轴平移，上边为负，下边为正
只设置一个参数表示向x方向移动，设置两个参数表示向x和y方向移动
也可以使用translateX(x)或者translateY(y)
应用：有一个很重要的应用，就是如果想要在一个div里面设置另一个div水平垂直都居中在之前是没有办法实时实现的，而现在可以通过子绝父相，然后设置上左都是50%，最后用transform: translate(-50%, -50%)来实时实现

3.2、roate（度数）实现元素旋转

正得顺时旋转
负值时逆时旋转

3.3、scale(x轴，有轴缩放)实现元素缩放，让元素根据中心原点对对象进行缩放，默认值为1

0-1之间的数表示缩小，大于1表示放大


-ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /* 标准语法 */

scale(x & y) | scale(x, y)

（1）、只设置一个值，是让整体缩放，设置两个值则是各自设置
（2）、不会影响其他元素的位置
（3）、也可以设置scaleX()或者scaleY()

3.4、skew()函数让元素倾斜

它可以将一个对象以其中心位置围绕x轴和y轴按照一定角度倾斜
正值表示顺时针，负值表示逆时针
skew(x) | skew(x, y)

（1）x用来指定元素水平方向倾斜的角度，y同理为垂直方向
（2）也可以使用skewX()—水平或者skewY()—竖直
（3）如果角度值为正，则向当前轴的负方向斜切，如果角度为负，则向当前轴的正方向斜切

3.5、matrix（）方法------把2D得方法合为一

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

div{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
 -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */}

3.6、transfrom-origin用来定义旋转中心点

transform-origin: right bottom;

四、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    2、写样式-->
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        div{
            width:224px;
            height: 224px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
    /*    3、重叠，用定位*/
        img{
            position: absolute;
            top: 0px;
            left:0px;
            transition: all 1s;
        }
        /*让前面得首先显示*/
        img:first-child{
            z-index:1;
        }

    /* 4、实现动画效果
    （1）、点击后，旋转后得
    （2）、使用过渡
    */
        div:hover img{
            /*旋转*/
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
<!--1、布局-->
<div>
    <img src="img/qian.svg" alt="">
    <img src="img/hou.svg" alt="">
</div>
</body>
</html>