我想制作一些3D滑块但是样式的转换不是同时开始的：
我希望它看起来好像正在旋转到中心。
如您所见，它首先调整大小然后移动和变换。
function sasa() {
var s = document.getElementById('s1');
s.classList.add('slidef');
}.slider {
width: 100%;
height: 400px;
margin: 0 auto;
position: relative;
}
.slide1 {
width: 40px;
height: 40px;
border: 2px solid red;
margin-left: 100px;
margin-bottom: 0;
margin-top: 5px;
-webkit-transform: perspective(50px) rotateY(-30deg);
position: absolute;
top: 180px;
right: 50px;
}
.slidef {
transition: width 1s linear 0s, height 1s linear 0s, -webkit-transform 1s linear 0s, right 1.5s linear 0s;
width: 400px;
height: 400px;
right: 300px;
-webkit-transform: perspective(0px) rotateY(0deg);
}<button onClick="sasa()">ssssss</button>
<div class="slider">
<div class="slide1" id="s1">sasa</div>
答案 0 :(得分：0)
喜欢这个吗？
pandas修改
OP，我看到你评论说转换仍然没有同时发生。我更改了脚本块以监视过渡期间更改的样式。
<html>
<head>
<style>
.slider {
width: 100%;
height: 400px;
margin: 0 auto;
position: relative;
}
.slide1 {
width: 40px;
height: 40px;
border: 2px solid red;
margin-left: 100px;
margin-bottom: 0;
margin-top: 5px;
-webkit-transform: perspective(50px) rotateY(-30deg);
position: absolute;
top: 180px;
right: 50px;
}
.slidef {
transition: 1s linear 0s;
width: 400px;
height: 400px;
right: 300px;
-webkit-transform: perspective(0px) rotateY(0deg);
}
</style>
<script>
function sasa() {
var s = document.getElementById('s1');
s.classList.add('slidef');
}
</script>
</head>
<body>
<button onClick="sasa()">ssssss</button>
<div class="slider">
<div class="slide1" id="s1">sasa</div>
</div>
</body>
</html>
控制台中的结果向我显示所有样式转换都是一起开始和结束。所以我不确定你在看什么。但我也不确定我完全理解你的目标。您可以返回为每种样式设置单独的过渡时间并进行调整，直到获得所需的样式。为此，请按以下方式定义slidef，并更改每种样式的开始和延迟数字。我所展示的首先是变换，然后是缩放和平移。
<script>
function monitor(e, done) {
var style = window.getComputedStyle(e);
console.log(
style.width,
style.height,
style.right,
style.transform);
if (! done.value) {
new Promise(r => setTimeout(r, 0))
.then(() => monitor(e, done));
}
}
function sasa() {
var done = { value: false };
var s = document.getElementById('s1');
s.addEventListener("transitionend", e => done.value = true, false);
monitor(s, done);
s.classList.add('slidef');
}
</script>