第4关：CSS3 旋转和倾斜

在敲代码

已于 2024-04-26 23:01:07 修改

阅读量1.7k

点赞数 5

文章标签： css3 css html

于 2023-04-26 12:36:44 首次发布

本文链接：https://blog.csdn.net/weixin_67272154/article/details/130383514

版权

任务描述

本关任务：用CSS3实现旋转和倾斜效果。

效果如下：

编程要求

在右侧编辑器中，补全Begin至End中间的部分，实现当滑过转盘时，旋转720度的效果。要求如下：

要添加过渡效果的属性为all；
过渡完成的时间为2s；
动画的速度曲线为ease，没有延迟;
.skew元素在X轴上倾斜45度，要注意方向；

注意：一定要加单位（deg），比如： transform: rotate(0deg);。

为了方便评测， CSS 都是需要以分号;结尾的。

效果如下：

代码

<!doctype html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        margin: 20px;
        overflow: hidden;
    }
    .pic{
         width: 300px;
         height: 300px;
         border-radius: 50%;
         float: left;
         /********* 图片过渡效果 ***********/
         

         transition:all 2s ease;


    /******** End ******************/
    }
   .pic:hover{
        /************ 旋转720度 **********/

         transform: rotate(720deg);

        /************ End ***************/
    }
    .skew{
        width:100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: green;
        color: #fff;
        margin: 100px 50px;
        float: left;
        /************ 倾斜45度(注意方向） **********/

        transform: skewX(-45deg);
        //transform-origin: left top;       
 
        /************ End **************/
    }
    .content{
        transform: skewX(45deg);
    }
    </style>
</head>
<body>
    <div class="box">
        <img class="pic" src="https://www.educoder.net/attachments/download/207568" alt="转盘">
        <div class="skew">
            <div class="content">主页</div>
        </div>
    </div>
</body>
</html>