7：---（1）2D转换（transform)-旋转

最新推荐文章于 2021-06-30 14:06:16 发布

liu1992452008

最新推荐文章于 2021-06-30 14:06:16 发布

阅读量353

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/liu1992452008/article/details/75333063

版权

HTML 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果

一：2D转换（transform）

CSS3变形--旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

.wrapper {

width:200px;

height:200px;

border: 1pxdotted red;

margin: 0auto;

}

.wrapper div {

width:200px;

height:200px;

background:orange;

-webkit-transform: rotate(45deg);

-moz-transform:rotate(45deg);

transform:rotate(45deg);

}

</div>

***相关代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .div1 {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
    }
    
    .div2 {
        width: 200px;
        height: 200px;
        background-color: salmon;
        transform: rotate(45deg);
    }
    
    .p1 {
        width: 300px;
        height: 50px;
        background-color: red;
        transform: rotate(60deg);
    }

</style>

<body>
    <h3>css3旋转</h3>
    <div class="div1">正常盒子</div>
    <div class="div2">旋转盒子</div>
    <p class="p1">文本</p>
</body>

</html>

***相关效果

liu1992452008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7：---（1）2D转换（transform)-旋转

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果一：2D转换（transform）CSS3变形--旋转 rotate()旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的
复制链接

扫一扫