Question

我想要做的是将图像置于页面上，其中图像比视口大几倍。图像的中心必须与当前视点的中心完美对齐（使用动态的，不同大小的图像和视口）。然后，使用CSS动画，我必须动画图像旋转。我们还假设解决方案不能使用jQuery或Javascript，并且隐藏溢出。

解决方案必须避免使用CSS transform()和translate()，因为它们会破坏关键帧动画以及页面上的其他样式。我也不拥有此特定网站，因此外部库，添加样式表以及修改<html>和<body>都受到限制。

注意：有代码，但没有发布，因为它全部错了。

Answer 1

用于居中和旋转：演示：http://jsfiddle.net/LWrSD/277/

CSS：

html, body {
    width:100%;
    height:100%;
}
div.horizontal {
    display: flex;
    justify-content: center;
}
div.vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
div.div {
    background-color: #fcf;
    width: 100%;
    height: 100%;
}
img {
    width: 100px;
    height: 100px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}

HTML：

<div class="horizontal div">
    <div class="vertical">
        <img src="http://www.lorempixel.com/600/200/sports/1/" />
    </div>
</div>

Answer 2

如果要将其居中，请使用CSS Transform：

示例：

img{
    position:relative;
    left:50%;
    transform:translate(-50%);}

对于旋转也使用变换：例如：

img{
    position:relative;
    left:50%;
    transform:translate(-50%);
    transform: rotate(7deg);
}

对于动画效果，您需要使用jQuery addClass。之后你只需要添加transition: all 1s; CSS样式，其中1是动画更改时间。

Answer 3

首先将div的css设置为此代码：

div {
width:980px;
margin: auto;
position:relative;
}

接下来为img设置css：例如：

img { 
display:block;
width:80px;
height:80px;
}

CSS在页面上居中和旋转图像

3 个答案: