CSS动画

最新推荐文章于 2021-08-04 04:13:17 发布

艾小梦

最新推荐文章于 2021-08-04 04:13:17 发布

阅读量83

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/smile14796/article/details/108651221

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

动画属性

translate()方法
通过给定的坐标，元素从当前位置开始移动。

translate(50px,40px)

在这里插入图片描述

rotate()方法
元素顺时针旋转给定的角度，负数表示逆时针
scale()方法
根据给定的宽度和高度，元素的尺寸会增加或减少

scale(5)

在这里插入图片描述

skew()
根据给定的水平线和垂直线的参数翻转元素


<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-moz-transform:skew(30deg,20deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
-o-transform:skew(30deg,20deg); /* Opera */
}
</style>
</head

在这里插入图片描述

transform（）方法
属性之一：translate移动，元素2D或3D的转换

#rotate{
                transform: rotate(30deg);
                -ms-transform: rotate(30deg);
                -moz-transform: rotate(30deg);
            }

在这里插入图片描述

transform-origin（）
**改变元素基点,就是元素围绕旋转或变形的点，只有设置了transform属性才会起作用。
**
top = top center = center top = 50% 0
right = right center = center right = 100%
bottom = bottom center = center bottom = 50% 100%
left = left center = center left = 0 = 0 50%
center = center = 50% 50%
top left = left top = 0 0
right top = top right = 100% 0
bottom right = right bottom = 100% 100%
bottom left = left bottom = 0 100%
参考网址
transform参考网址

艾小梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS动画

动画属性translate()方法通过给定的坐标，元素从当前位置开始移动。translate(50px,40px)rotate()方法元素顺时针旋转给定的角度，负数表示逆时针scale()方法根据给定的宽度和高度，元素的尺寸会增加或减少scale(5)skew()根据给定的水平线和垂直线的参数翻转元素<head><style> div{width:100px;height:75px;background-color:ye
复制链接

扫一扫

专栏目录