JavaScript之点击改变图片形状（transform的应用）

最新推荐文章于 2024-01-27 02:12:59 发布

知识进脑的肖老千啊

最新推荐文章于 2024-01-27 02:12:59 发布

阅读量1.3k

点赞数 2

分类专栏： HTML JS 文章标签： javascript html

本文链接：https://blog.csdn.net/m0_50481455/article/details/116208016

版权

这篇博客探讨了如何使用JavaScript和CSS的transform属性，通过点击事件改变图片的形状。示例中展示了图片在点击后的形变效果，并进一步扩展到实现时钟指针的动态走动。附带了代码和实际效果的展示。

摘要由CSDN通过智能技术生成

JavaScript之点击改变图片形状（transform的应用）

附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform的运用</title>
    <style type="text/css">
        #box{
    
            width: 50px;
            height: 50px;
            background-color: red;
            /*traslate 位移  rotate 旋转幅度   scale 放大幅度   skew倾斜*/
            /*transform: translate(100px,200px) rotate(20deg) scale(2.0) skew(10deg);*/
        }
    </style>
</head>
<body>
    <button id="btn">形变</button>
    <div id="box"></div>
    <script>
        window.

最低0.47元/天解锁文章

知识进脑的肖老千啊

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之点击改变图片形状（transform的应用）

JavaScript之点击改变图片形状（transform的应用）附上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>transform的运用</title> <style type="text/css"> #box{ width: 50px;
复制链接

扫一扫

专栏目录