css 图片旋转并自适应div

最新推荐文章于 2025-05-06 14:21:01 发布

web16888

最新推荐文章于 2025-05-06 14:21:01 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： next.js web css样式

本文链接：https://blog.youkuaiyun.com/qq_41211900/article/details/114362786

next.js 同时被 3 个专栏收录

33 篇文章

订阅专栏

css样式

6 篇文章

订阅专栏

web

4 篇文章

订阅专栏

本文介绍了一个使用React实现的图片旋转组件，通过简单的状态管理和CSS样式实现了图片的90度旋转功能，并提供了交互按钮来切换旋转状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { useState} from 'react'
function zimg(params) {
    const [rotateIndex,setrotateIndex]=useState(0)
    function bindrotate(){
        let rotateIndex1=rotateIndex?0:1
        setrotateIndex(rotateIndex1)
    }
      return (
 <>
<div className={` ${styles.box_img} ${rotateIndex?styles.box_rotate:''}`}>
    <img src="/img/1.png">
</div>
<div className={styles.box_btn} onClick={bindrotate}>旋转<div>
</>
       )
}
export default zimg

.box_img{
    width: 100vw;
	height: 100vh;
	overflow: hidden;
}
//旋转90度，宽度和高度调换位置，并调整中心位置
.box_rotate{
		overflow: hidden;
		transform: rotate(90deg)  translate(calc( 100vh / 2 - 100vw / 2) , calc(100vh / 2 - 100vw / 2));
		width: 100vh;
		height: 100vw;
    transform-origin: center;
}

	.box_btn{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 40px;
		line-height: 40px;
		background: rgba(0,0,0,0.5);
		color: #ffffff;
	}

css 图片旋转并自适应div，html的，可以直接运行 https://download.youkuaiyun.com/download/qq_41211900/16077801