个人笔记2020 6-3

CSS3中的变形功能

运用transform属性来实现变形

原代码及效果图如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>transform属性</title>
    <style>
        div{
        	margin:0 auto;
            width: 300px;
            height: 300px;
            background-color: #000;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

个人笔记2020 6-3_第1张图片

1.rotate旋转,旋转方向为顺时针,deg为旋转角度单位,代码及效果图如下:

<style>
        div{
            margin:0 auto;
            width: 300px;
            height: 300px;
            background-color: #000;
            -ms-transform:rotate(45deg); /* IE 9 */
            -moz-transform:rotate(45deg); /* Firefox */
            -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
            -o-transform:rotate(45deg); /* Opera */

        }
    </style>

个人笔记2020 6-3_第2张图片

2.scale缩放转换,scale(x,y)表示同时缩放;scaleX(x)仅X轴缩放;scaleY(y)仅Y轴缩放。x,y表示倍数。代码及缩放后的图如下:

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: #000;
        }
        div:hover{
            -ms-transform:scale(0.1,0.1); /* IE 9 */
            -moz-transform:scale(0.1,0.1); /* Firefox */
            -webkit-transform:scaley(0.5); /* Safari 和 Chrome */
            -o-transform:scale(0.1,0.1); /* Opera */
        }
    </style>

个人笔记2020 6-3_第3张图片

3.倾斜skew,方法和缩放类似,其中x,y均为角度,代码及倾斜后的图如下(这里以倾斜Y轴为例):

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: #000;
        }
        div:hover{
            -ms-transform:skewy(30deg); /* IE 9 */
            -moz-transform:skewy(30deg); /* Firefox */
            -webkit-transform:skewy(30deg); /* Safari 和 Chrome */
            -o-transform:skewy(30deg); /* Opera */
        }
    </style>

个人笔记2020 6-3_第4张图片

4.translate移动,代码及移动前后效果如下:

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: #000;
        }
        div:hover{
            -ms-transform:translate(50px,50px) /* IE 9 */
            -moz-transform:translate(50px,50px); /* Firefox */
            -webkit-transform:translate(50px,50px); /* Safari 和 Chrome */
            -o-transform:translate(50px,50px); /* Opera */
        }
    </style>

前:

个人笔记2020 6-3_第5张图片

后:

个人笔记2020 6-3_第6张图片

你可能感兴趣的:(个人笔记)