我想从这张地球图像的中心看rotateY().现在它从右边旋转.这是我的代码:

@keyframes rotate {
    to {
        transform: rotateY(-360deg);
    }
}

http://jsfiddle.net/qwrg9684/

推荐答案

如果你直接对图像进行操作,它就会起作用.https://jsfiddle.net/akso4r6q/

<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png" />
#logo {
    animation: rotate 5s linear infinite;
    transform-origin: center center;
}

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

如果你需要div,你也可以设置display: inline-block;.围绕图像右侧旋转的外观实际上是围绕包围div的中心旋转,该div水平扩展以适应视口.

您可以看到一个fiddle here,其中显示了一个文本元素,该元素是图像的同级元素.

Css相关问答推荐

视频嵌入在Bootstrap 5轮播中没有响应扩展

显示Reaction组件上的问题.使用FlexBox时的意外大小

设置ScaleImageButton的样式

下拉菜单未展开- bootstrap

在最小和最大视口之间时具有固定值的 CSS 钳位

如何在 CSS 中使 Flex 容器内的网格响应,而不 destruct 外部 Flex 容器的布局?

如何使用 Sass to CSS 创建 H1 到 H6 标题并减小字体大小

如何添加一个类以在开始时触发转换

css - 悬停访问的链接没有背景 colored颜色

不能在带有 SCSS 的过滤器灰度内使用 CSS 变量

Twitter Bootstrap:进度条居中文本

我应该避免使用text-align: justify;吗?

你能用 JavaScript 控制 GIF 动画吗?

如何在 Chrome 中模拟偏好 colored颜色 方案媒体查询?

如何将页脚保持在屏幕底部

在 Firefox 中删除额外的按钮间距/填充

将未知大小的大图像居中在一个较小的 div 中,并隐藏溢出

通过javascript删除或禁用浏览器的焦点边框

CSS:悬停一个元素,多个元素的效果?

将 -moz-available 和 -webkit-fill-available 放在一个宽度中(CSS 属性)