css 实现内容和背景转东90%

要实现内容和背景转动90%，可以使用CSS中的transform属性。
首先，确保需要应用转动的元素有一个父级容器。然后，给父级容器添加以下样式：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

接下来，给需要转动的元素添加以下样式：

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transform-origin: center center;
}

这样就可以实现内容和背景转动90%了。

解释：首先，将父级容器设置为相对定位，并且设置宽度和高度为100%，这样才能让内部元素内容和背景可以完全显示出来，并且通过设置overflow为hidden，将超出容器的部分隐藏起来。

接着，给需要转动的元素设置绝对定位，并使用transform属性进行转动，translateX(-50%)和translateY(-50%)是为了将元素居中对齐，rotate(90deg)是进行90度的转动。而transform-origin属性设置为center center，表示转动的中心点为元素的中心。

需要注意的是，为了实现元素的转动，父级容器和需要转动的元素的尺寸和位置需要根据具体情况进行调整，以确保效果能够达到预期。

相关问题

vue3.2实现css背景旋钮转动

要实现CSS背景旋钮转动，可以使用Vue 3.2中的CSS动画和转换属性。下面是一个简单的实现示例：

1. 首先，在Vue组件的样式中添加以下CSS代码：

.spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

2. 在Vue组件中，使用类绑定绑定CSS类：

<template>
  <div :class="{ 'spin': isSpinning }"></div>
</template>

<script>
export default {
  data() {
    return {
      isSpinning: false
    };
  }
}
</script>

3. 在Vue组件中，使用计时器或其他事件触发器来控制CSS类的状态，从而启动或停止动画：

<template>
  <button @click="startSpinning">Start spinning</button>
  <button @click="stopSpinning">Stop spinning</button>
  <div :class="{ 'spin': isSpinning }"></div>
</template>

<script>
export default {
  data() {
    return {
      isSpinning: false
    };
  },
  methods: {
    startSpinning() {
      this.isSpinning = true;
    },
    stopSpinning() {
      this.isSpinning = false;
    }
  }
}
</script>

这样，当用户点击“Start spinning”按钮时，Vue组件的样式中的CSS动画将启动，直到用户点击“Stop spinning”按钮。

CSS3 animation 实现地球转动

可以使用CSS3的动画特性来实现地球旋转的效果，具体步骤如下：

1.创建一个 div 元素作为地球的容器，并设置其宽度和高度为相同的值，以达到正圆的效果。

2.为该元素添加 background-image 属性，设置地球的背景图片。

3.使用 CSS3 的 transform 属性来旋转该元素。具体来说，可以使用 rotate() 函数来实现旋转，如：transform: rotate(360deg)。

4.使用 animation 属性来控制动画效果。设置 animation-name 为 rotate，animation-duration 为 10s，animation-iteration-count 为 infinite，表示让动画无限循环播放。

代码示例：

<div class="earth"></div>

.earth {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: url(earth.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation-name: rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

以上代码会使得地球永远绕着自己的轴心旋转，从而实现地球转动的效果。