html5第八课时，变形效果

最新推荐文章于 2023-02-13 08:15:00 发布

甲戌天火

最新推荐文章于 2023-02-13 08:15:00 发布

阅读量362

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_36872096/article/details/71775615

版权

HTML5 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>变形效果</title>
    <style>
        img{
            /*transform: translate(500px,100px);
            /!*以左上角为中心点，向右和向下移动*!/*/
            /*transform: scale(1.5,1);/!*放大图片,水平放大，垂直放大*!/*/
            /*transform: skew(9deg);
            /!*图片倾斜的角度 skew是以中心点倾斜，skewX是以x轴为中心倾斜
                skewY是以y轴为中心倾斜*!/*/
            /*transform: rotate(90deg);*/
            /*图片旋转的角度，rotate是以中心点旋转，
            rotateX是以x轴为中心旋转，rotateY是以Y轴为旋转轴。*/
            /*对所有的属性添加过渡效果*/
            transition-property: all; /*指定过渡使用的css属性*/
            transition-duration: 2s;/*过渡完成的时间*/
            transition-timing-function: ease;/*指定过渡函数，常用的ease等等*/
            transition-delay: 3s;/*平滑过渡的时间，鼠标放在上面三秒后变化，离开后三秒变化。*/
            /*以上四种属性，可以直接用transition:all 1.2s ease 3s;
                其中all是表示所有的属性都是用过渡效果*/
        }
        img:hover{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
<img src="../../image/f3_Android1.png" alt=""/>
</body>
</html>

甲戌天火

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5第八课时，变形效果

html>html>head lang="en"> meta charset="UTF-8"> title>变形效果title> style> img{ /*transform: translate(500px,100px); /!*以左上角为中心点，向右和向下移动*!/*/ /*t
复制链接

扫一扫