css之2d缩放和旋转

基本语法:transform:scale(参数);
对元素进行水平或垂直方向的缩放
scale(参数):沿着x轴y轴放大缩小n倍
scale(参数1,参数2);沿着水平放大缩小x倍,沿着垂直方向放大缩小y倍
scaleX(参数):沿着水平放大缩小x倍
scaleX(参数):沿着垂直方向放大缩小y倍
案例:

    <style>
        div{
            height: 500px;
            width: 500px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }
        img{
            transition: all 2s;
            
        }
        div:hover img{
            transform: scale(1.5);
        }
    </style>
</head>
<body>
    <div>
        <img src="../image/01.jpg" alt="">
    </div>
</body>

旋转基本语法:transform:routate()
对元素进行旋转,取值使用度数(deg),正值为顺时针,负值为逆时针。
rotate(参数):围绕元素的正中心进行旋转
rotateX(参数):围绕x轴进行旋转
rotateY(参数):围绕y轴进行旋转

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现图片的、移动和旋转,可以利用HTML5中的canvas元素和JavaScript来实现。具体的步骤如下: 1. 在HTML中创建canvas元素,并设置它的宽度和高度,以及一个置图片的容器元素。 ```html <canvas id="myCanvas" width="500" height="500"></canvas> <div id="image-container"></div> ``` 2. 在JavaScript中,获取canvas元素和容器元素,并创建一个Image对象来加载图片。 ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.onload = function() { // 图片加载完成后执行以下代码 }; img.src = "path/to/image.jpg"; ``` 3. 在Image对象加载完成后,将它绘制到canvas上,并将canvas中的图像转换为一个可、可旋转、可拖动的对象。 ```javascript var container = document.getElementById("image-container"); var imageObject = { x: canvas.width / 2, // 图片中心点的x坐标 y: canvas.height / 2, // 图片中心点的y坐标 width: img.width, // 图片的宽度 height: img.height, // 图片的高度 angle: 0, // 图片的旋转角度,单位为弧度 scale: 1 // 图片的比例 }; // 将图片绘制到canvas上 ctx.drawImage(img, 0, 0); // 将canvas中的图像转换为一个可、可旋转、可拖动的对象 var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); container.style.width = canvas.width + "px"; container.style.height = canvas.height + "px"; container.style.backgroundImage = "url(" + canvas.toDataURL() + ")"; container.style.backgroundSize = "100% 100%"; ``` 4. 实现图片的、移动和旋转功能。对于旋转,可以利用CSS3的transform属性来实现;对于移动,可以通过修改图片对象的x和y属性来实现。 ```javascript // 图片 function zoomImage(scale) { imageObject.scale *= scale; container.style.transform = "rotate(" + imageObject.angle + "rad) scale(" + imageObject.scale + ")"; } // 旋转图片 function rotateImage(angle) { imageObject.angle += angle; container.style.transform = "rotate(" + imageObject.angle + "rad) scale(" + imageObject.scale + ")"; } // 移动图片 function moveImage(dx, dy) { imageObject.x += dx; imageObject.y += dy; container.style.left = imageObject.x - imageObject.width / 2 + "px"; container.style.top = imageObject.y - imageObject.height / 2 + "px"; } ``` 以上代码仅为示例,具体实现方式可能会因具体需求而有所不同。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值