14transform变化样式

最新推荐文章于 2021-02-22 04:29:27 发布

宠儿呀

最新推荐文章于 2021-02-22 04:29:27 发布

阅读量153

点赞数 1

分类专栏： html+css笔记文章标签： html html5 css css3

本文链接：https://blog.csdn.net/qq_46055080/article/details/104541235

版权

html+css笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

最近新学了思维导图，就用图来表示吧
transform变化样式
他们的复合样式位置的不同会导致效果的不同。
比如这样：
①transform:translateX(200px) translateY(300px) rotate(45deg);
变化1
②transform:rotate(45deg) translateX(300px) translateY(200px) ;
变化2
话不多说，下边是一个摩天轮旋转代码：

/*css样式*/
 <style>
        body{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            width: 1547px;
            height: 1000px;
            background-image:url(images/bg.png);
            margin:auto;
            position: relative;
        }
        .wheel{
            width: 768px;
            height: 768px;
            background-image:url(images/fsw.png);
            position: relative;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            animation: center 8s infinite linear;
        }
        .child01{
            width: 130px;
            height: 170px;
            background-image: url(images/boy.png);
            position: absolute;
            top: 300px;
            left: 0;
            animation: center 8s infinite linear;
            animation-direction: reverse;
        }
        .child02{
            width: 130px;
            height: 170px;
            background-image: url(images/girl.png);
            position: absolute;
            top: 100px;
            left: 600px;
            animation: center 8s infinite linear;
            animation-direction: reverse;
        }
        .child03{
            width: 130px;
            height: 170px;
            background-image: url(images/shamegirl.png);
            position: absolute;
            top: 600px;
            left: 470px;
            animation: center 8s infinite linear;
            animation-direction: reverse;
        }
        @keyframes center {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>
    <body> <!-- 主体区--> 
    <div class="box">
        <div class="wheel">
            <div class="child01"></div>
            <div class="child02"></div>
            <div class="child03"></div>
        </div>
    </div>
</body>

效果图：
摩天轮

宠儿呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
14transform变化样式

最近新学了思维导图，就用图来表示吧他们的复合样式位置的不同会导致效果的不同。比如这样：①transform:translateX(200px) translateY(300px) rotate(45deg);②transform:rotate(45deg) translateX(300px) translateY(200px) ;话不多说，下边是一个摩天轮旋转代码：/*css样式...
复制链接

扫一扫

专栏目录