今天我遇到了一个棘手的问题,因为我被分配了一个 HTML5 元素。
该元素包括在斜坡上移动图片。我将在下图中演示这一点
如您所见,我想在斜坡 AB 上将奥巴马的照片从 A 移动到 B。并且在移动的同时,画面被AB线裁剪和限制。 AB 线实际上是 PNG 图片的下边缘。
最好的问候。
最佳答案
你可以尝试做一些转换:
想法是旋转一个外部框并包含一个图像,然后在内部旋转图像。
演示:http://jsbin.com/ozusic/1/edit
CSS:
@keyframes "move" {
0% {
-webkit-transform: translateX(0px) translateY(0px) rotate(10deg);
-moz-transform: translateX(0px) translateY(0px) rotate(10deg);
-o-transform: translateX(0px) translateY(0px) rotate(10deg);
-ms-transform: translateX(0px) translateY(0px) rotate(10deg);
transform: translateX(0px) translateY(0px) rotate(10deg);
}
100% {
-webkit-transform: translateX(500px) translateY(70px) rotate(10deg);
-moz-transform: translateX(500px) translateY(70px) rotate(10deg);
-o-transform: translateX(500px) translateY(70px) rotate(10deg);
-ms-transform: translateX(500px) translateY(70px) rotate(10deg);
transform: translateX(500px) translateY(70px) rotate(10deg);
}
}
@-moz-keyframes move {
0% {
-moz-transform: translateX(0px) translateY(0px) rotate(10deg);
transform: translateX(0px) translateY(0px) rotate(10deg);
}
100% {
-moz-transform: translateX(500px) translateY(70px) rotate(10deg);
transform: translateX(500px) translateY(70px) rotate(10deg);
}
}
@-webkit-keyframes "move" {
0% {
-webkit-transform: translateX(0px) translateY(0px) rotate(10deg);
transform: translateX(0px) translateY(0px) rotate(10deg);
}
100% {
-webkit-transform: translateX(500px) translateY(70px) rotate(10deg);
transform: translateX(500px) translateY(70px) rotate(10deg);
}
}
@-ms-keyframes "move" {
0% {
-ms-transform: translateX(0px) translateY(0px) rotate(10deg);
transform: translateX(0px) translateY(0px) rotate(10deg);
}
100% {
-ms-transform: translateX(500px) translateY(70px) rotate(10deg);
transform: translateX(500px) translateY(70px) rotate(10deg);
}
}
@-o-keyframes "move" {
0% {
-o-transform: translateX(0px) translateY(0px) rotate(10deg);
transform: translateX(0px) translateY(0px) rotate(10deg);
}
100% {
-o-transform: translateX(500px) translateY(70px) rotate(10deg);
transform: translateX(500px) translateY(70px) rotate(10deg);
}
}
img {
height: 100px;
width: 100px;
position: absolute;
-webkit-animation: 5s move infinite;
-moz-animation: 5s move infinite;
-ms-animation: 5s move infinite;
-o-animation: 5s move infinite;
animation: 5s move infinite;
z-index: -1;
}
div.box {
margin-top: 50px;
height: 150px;
border: 3px solid black;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
overflow: hidden;
}
HTML:
<div class='box'>
<img src='http://www.biography.com/imported/images/Biography/Images/Profiles/O/Barack-Obama-12782369-2-402.jpg' />
</div>
关于Javascript - 沿对 Angular 线裁剪图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16477984/