我创建了一个滑块，其中当当前幻灯片更改时，对倾斜元素进行了动画处理。请先在大于1500像素的视口中查看，以了解到目前为止该代码段的工作方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" media="screen, projection" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" media="screen, projection" rel="stylesheet" type="text/css"/>
<style>
body{
font-family: Arial, sans-serif;
font-size: 50px;
}
.slider-keyvisual .slick-slide {
z-index: 999;
opacity: 1 !important;
}
.slider-keyvisual .slick-arrow {
background-color: red !important;
width: 100px;
height: 100px;
z-index: 1;
}
.slider-keyvisual .my-wrapper {
margin: 0 -15vw;
}
.slider-keyvisual .skew-outer-wrapper {
transform: skew(-35deg);
overflow: hidden;
width: 0 !important;
display: block !important;
margin: auto;
transition: width 2s;
}
.slider-keyvisual .skew-outer-wrapper.animate {
width: 130vw !important;
display: block !important;
}
.slider-keyvisual .skew-wrapper {
transform: skew(35deg);
}
.slider-keyvisual .outer-wrapper {
z-index: 9999;
position: relative;
width: 0;
margin: auto;
height: 750px;
}
.slider-keyvisual .wrapper {
height: 750px;
width: 100vw;
position: absolute;
left: -50vw;
overflow: hidden;
}
.slider-keyvisual .wrapper .slide {
height: 750px;
width: 100vw;
}
.slider-keyvisual .wrapper .container {
z-index: 1111;
}
.slider-keyvisual .wrapper .container .h1 {
margin-bottom: 25px;
}
.slider-keyvisual .wrapper .container .button-arrow-right {
height: 105px;
padding: 30px 30px 30px 0;
}
/*****************/
/*** sass code ***/
/*****************/
/*
.slider-keyvisual{
.slick-slide{
z-index: 999;
opacity: 1 !important;
}
.slick-arrow{
background-color: red !important;
width: 100px;
height: 100px;
}
.my-wrapper{
margin: 0 -15vw;
}
.skew-outer-wrapper{
transform: skew(-35deg);
overflow: hidden;
width: 0 !important;
display: block !important;
margin: auto;
transition: width 2s;
&.animate{
width: 130vw !important;
display: block !important;
}
}
.skew-wrapper{
transform: skew(35deg);
}
.outer-wrapper{
z-index: 9999;
position: relative;
width: 0;
margin: auto;
height: 750px;
}
.wrapper{
height: 750px;
width: 100vw;
position: absolute;
left: -50vw;
overflow: hidden;
.slide{
height: 750px;
width: 100vw;
}
.container{
z-index: 1111;
.h1{
margin-bottom: 25px;
}
.button-arrow-right{
height: 105px;
padding: 30px 30px 30px 0;
}
}
}
}
*/
</style>
</head>
<body>
<main>
<h1>TEST Slider</h1>
<hr>
<section class="slider-keyvisual">
<div class="my-wrapper">
<div class="skew-outer-wrapper animate">
<div class="skew-wrapper">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide" style="background: url(https://previews.123rf.com/images/andiz/andiz1507/andiz150700110/42082319-summer-forrest-sunrise-dawn-in-the-forest-of-bavaria-germany.jpg) center/cover no-repeat">
<div class="container">
<h2 class="h1">1 big headline</h2>
<p>1 Some Subline with Lorem ipsum</p>
<a href="#" class="button-arrow-right"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="my-wrapper">
<div class="skew-outer-wrapper">
<div class="skew-wrapper">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide" style="background: url(https://previews.123rf.com/images/keeskoopmans/keeskoopmans1111/keeskoopmans111100009/11481448-forrest-edge-in-autumn.jpg) center/cover no-repeat">
<div class="container">
<h2 class="h1">2 big headline</h2>
<p>2 Some Subline with Lorem ipsum</p>
<a href="#" class="button-arrow-right"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="my-wrapper">
<div class="skew-outer-wrapper">
<div class="skew-wrapper">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide" style="background: url(https://i.imgur.com/Blmzdc3.jpg) center/cover no-repeat">
<div class="container">
<h2 class="h1">3 big headline</h2>
<p>3 Some Subline with Lorem ipsum</p>
<a href="#" class="button-arrow-right"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="my-wrapper">
<div class="skew-outer-wrapper">
<div class="skew-wrapper">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide" style="background: url(https://img00.deviantart.net/2bd0/i/2009/276/c/9/magic_forrest_wallpaper_by_goergen.jpg) center/cover no-repeat">
<div class="container">
<h2 class="h1">4 big headline</h2>
<p>4 Some Subline with Lorem ipsum</p>
<a href="#" class="button-arrow-right"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="my-wrapper">
<div class="skew-outer-wrapper">
<div class="skew-wrapper">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide" style="background: url(https://upload.wikimedia.org/wikipedia/commons/9/99/Fog_forrest_frickberg.jpg) center/cover no-repeat">
<div class="container">
<h2 class="h1">5 big headline</h2>
<p>5 Some Subline with Lorem ipsum</p>
<a href="#" class="button-arrow-right"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<hr>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<script>
$(document).ready(function() {
$('.slider-keyvisual').slick({
fade: true,
speed: 0
});
$('.slider-keyvisual').on('beforeChange', function(event, slick, currentSlide, nextSlide){
// $('.slick-current .skew-outer-wrapper').removeClass('animate');
});
$('.slider-keyvisual').on('afterChange', function(event, slick, currentSlide, nextSlide){
// $('.slick-current .skew-outer-wrapper').removeClass('animate');
$('.slick-current .skew-outer-wrapper').addClass('animate');
});
});
</script>
</body>
</html>
它几乎可以按预期工作，但是'.skew-outer-wrapper'容器移动动画的末尾以及该容器的位置存在问题：在动画末尾，背景图像由“ .skew-outer-wrapper”容器未居中引起的从左向右移动，但我不知道如何更改此设置。甚至动画也不能完全从中心开始。
方法/我尝试使用变换原点，位置：绝对或负边距到目前为止都无效，因为它们是'.skew-outer的起源-wrapper容器分别从左或从右开始而不是从中心开始的动画。因此，请帮助我在动画结束时停止背景图像的移动，并使动画恰好在中央开始。
如果你们告诉我使用css偏斜的方法是错误的方式，而应该以另一种方式完成：随意告诉我。
滑块当然必须是响应性的。幻灯片更改。这就是为什么。当然将来，无论滑块旋转了多少圈，动画都应该可以在幻灯片的任何更改上起作用。