2d过渡

最新推荐文章于 2024-07-23 14:07:14 发布

n34886746

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量219

点赞数

文章标签： css3 css

本文链接：https://blog.csdn.net/n34886746/article/details/106446723

版权

2d过渡

转换是css3的颠覆性特效之一，可以进行平移，翻转，缩放，变形，甚至支持矩阵变换，取代之前flash才能实现的特效。css3的布局不会影响原来的布局。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2d变换</title>
    <style>
        html,body,div,li, ul {
            padding: 0;
            margin: 0;
        }
		ul {
            list-style: none;}
		li {
            width: 100px;
            height: 100px;
            border: 5px solid blue;
            margin: 10px;
            transition: all 1s linear;
        }
        /*translate(x,y) 向左向下平移*/
        li:nth-child(1):hover {
            transform: translate(10px, 10px);
        }
        /*scale(x,y) 缩放，先水平方向上进行缩放，再垂直方向上进行缩放*/
        li:nth-child(2):hover{
            transform: scale(2,0.5);
        }
        /*tansform-origin:设置旋转的原点 rotate(50deg)顺时针方向上旋转*/
        li:nth-child(3):hover{
		transform-origin: 50px 50px;
		transform: rotate(50deg)
        }
        /*skew(x,y):式元素进行一定角度上的倾斜*/
        li:nth-child(4):hover{
		transform:skew(30deg,0deg) ;
        }
    </style>
</head>

<body>

    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

</body>

</html>

n34886746

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2d过渡

2d过渡转换是css3的颠覆性特效之一，可以进行平移，翻转，缩放，变形，甚至支持矩阵变换，取代之前flash才能实现的特效。css3的布局不会影响原来的布局。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫