css_2D变形_transform

最新推荐文章于 2024-09-17 00:54:14 发布

qq_42535842

最新推荐文章于 2024-09-17 00:54:14 发布

阅读量173

点赞数

分类专栏： css 文章标签： css transform

本文链接：https://blog.csdn.net/qq_42535842/article/details/103093625

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ife_设计师

No.2 - 初步接触 CSS 2D 变形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div {
            width: 35px;
            height: 42px;
            border: 1px solid grey;
            text-align: center;
            font-size: 12px;
            line-height: 40px;
            background-color: whitesmoke;
            margin: 20px;
            display: inline-block;
        }
        div#container{
            width: 1000px;
            height: 350px;
            border: 0px;
            background-color: white;
        }
        div.box0 {
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
        div.box1 {
            -webkit-transform: skewX(30deg);
            -moz-transform: skewX(30deg);
            -ms-transform: skewX(30deg);
            -o-transform: skewX(30deg);
            transform: skewX(30deg);/*向左倾斜30度*/
        }
        div.box2 {
            -webkit-transform: scaleX(0.5);
            -moz-transform: scaleX(0.5);
            -ms-transform: scaleX(0.5);
            -o-transform: scaleX(0.5);
            transform: scaleX(0.5); /*x轴压缩*/
        }
        div.box3 {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);/*旋转45度*/
        }
        div.box4 {
            -webkit-transform: translate(10px,20px);
            -moz-transform: translate(10px,20px);
            -ms-transform: translate(10px,20px);
            -o-transform: translate(10px,20px);
            transform: translate(10px,20px);/*x轴位移10px，y轴位移20px*/
        }
        div.box5 {
            -webkit-transform: rotate(45deg) skewX(30deg) translate(10px,20px);
            -moz-transform: rotate(45deg) skewX(30deg) translate(10px,20px);
            -ms-transform: rotate(45deg) skewX(30deg) translate(10px,20px);
            -o-transform: rotate(45deg) skewX(30deg) translate(10px,20px);
            transform: rotate(45deg) skewX(30deg) translate(10px,20px);
        }
    </style>
</head>
<body>
<div id="container">
<div class="box0">box0</div>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
</div>
</body>
</html>