css之图片旋转-前端-E先生的博客

实例

旋转 div 元素：

div{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);  /* IE 9 */
    -moz-transform:rotate(7deg);  /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg);  /* Opera */
}

亲自试一试

页面底部有更多实例。

浏览器支持

IE Firefox Chrome Safari Opera

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

为了更好地理解 transform 属性，请查看这个演示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: auto;
            margin: 20% auto;
            animation: myrotate 3s linear infinite;
            -webkit-animation: myrotate 3s linear infinite;
        }
        @keyframes myrotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        @-webkit-keyframes myrotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <img src="./img/dark.jpg">
</body>
</html>

本文来自E先生的博客，如若转载，请注明出处：https://javajz.cn

css之图片旋转

留言区

历史留言

css之图片旋转

相关推荐

css之图片旋转

留言区

历史留言