css 背景图片background-image旋转180度 不旋转元素
时间: 2024-01-15 21:05:36 浏览: 53
可以使用 CSS3 的 transform 属性来实现背景图片旋转,同时不旋转元素。具体实现方法如下:
```css
.background {
background-image: url('your-image-url');
transform: rotate(180deg);
transform-origin: center;
}
```
其中,`transform: rotate(180deg)` 表示将元素旋转 180 度,`transform-origin: center` 表示以元素中心为旋转中心。
相关问题
怎么用vue写一个点击箭头显示内容并旋转180度,再点击箭头隐藏内容
可以通过绑定一个变量来控制箭头的旋转和内容的显示与隐藏。
HTML模板:
```html
<div class="arrow-box" @click="showContent = !showContent">
<i class="arrow-icon" :class="{ 'rotate': showContent }"></i>
<div class="content-box" v-show="showContent">
<!-- 要显示的内容 -->
</div>
</div>
```
CSS样式:
```css
.arrow-box {
position: relative;
cursor: pointer;
}
.arrow-icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url(arrow.png);
background-repeat: no-repeat;
background-size: contain;
transition: transform 0.3s ease-in-out;
}
.rotate {
transform: rotate(180deg);
}
.content-box {
position: absolute;
top: 20px;
left: 0;
width: 100%;
padding: 10px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
```
JavaScript代码:
```javascript
export default {
data() {
return {
showContent: false
};
}
};
```
其中,`showContent` 变量用于控制箭头的旋转和内容的显示与隐藏。当变量值为 `true` 时,箭头会旋转180度并显示内容;当变量值为 `false` 时,箭头会恢复原状并隐藏内容。点击箭头时,通过 `@click` 事件触发 `showContent` 变量的取反操作。箭头的旋转和内容的显示与隐藏则通过绑定 CSS 类名实现。
用html+css写一个两层图片重叠翻转
当然可以!下面是一个使用 HTML 和 CSS 实现两层图片重叠翻转的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
perspective: 1000px;
width: 300px;
height: 300px;
}
.card {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
}
.card:hover {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.front {
background-image: url('front-image.jpg');
}
.back {
background-image: url('back-image.jpg');
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</body>
</html>
```
在上面的代码中,我们创建了一个容器 `.container`,它具有相对定位和透视属性。然后,我们在容器内部创建了一个翻转卡片 `.card`,它具有绝对定位和三维变换属性。当鼠标悬停在卡片上时,我们使用 CSS 的 `transform` 属性将其旋转180度。
卡片有两个面 `.front` 和 `.back`,它们都具有绝对定位和背面可见性属性。我们可以通过在 `.front` 和 `.back` 的 `background-image` 属性中设置不同的图片路径来实现两个图片的重叠翻转效果。
记得将 `front-image.jpg` 和 `back-image.jpg` 替换为你自己的图片路径。你可以根据需要自定义容器和卡片的宽度、高度和样式。希望对你有帮助!如果你有任何问题,请随时问我。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)