怎么利用js控制translate3d效果

js怎么控制让.active时候translate3d缓慢到100px增加

<div class="box" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"></div>
<div class="box active" style="transition-duration: 100ms; transform: translate3d(0px, 100px, 0px);"></div>

不需要js
css 中设置:active伪类即可
你题目的解答代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
.box {
    transition-duration: 100ms;
    transform: translate3d(0px, 0px, 0px);
    width: 300px;
    height: 300px;
    background-color: red;
}
.box:active {
    transform: translate3d(0px, 100px, 0px);
 }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

你active是什么情况会出现

请查看效果：https://hovertree.com/front/1/
代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3动画-何问起</title>
    <style>
        .box {
            height: 220px;
            width: 330px;
            background-color: lightpink;
            transform: translate3d(0px, 0px, 0px);
            transition-duration: 500ms;
        }

            .box:active {
                height: 220px;
                width: 330px;
                background-color: lightpink;
                transform: translate3d(0px, 100px, 0px);
                transition-duration: 2s;
            }
    </style>
</head>
<body>
    CSS3动画示例
    <div class="box">请点击本方框</div>
    &copy; <a href="https://hovertree.com">何问起</a> hovertree.com <a href="https://hovertree.com/h/bjag/8a721qci.htm">返回</a>
</body>
</html>



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
        }

        .box:active {
            transition-duration: 100ms;
            transform: translate3d(0px, 100px, 0px);
        }

        #box1 {
            width: 100px;
            height: 100px;
            background-color: #ff0;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: #f0f;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div id="box1"></div>
    <div id="box2"></div>
    <script>
        document.styleSheets[0].addRule('#box1:active', 'transition-duration: 100ms;transform: translate3d(0px, 100px, 0px);');
        document.getElementById('box2').onmousedown = function () {
            this.style.transitionDuration = '100ms';
            this.style.transform = 'translate3d(0px, 100px, 0px)';
        };
        document.onmouseup = function () {
            document.getElementById('box2').style.transitionDuration = '';
            document.getElementById('box2').style.transform = 'translate3d(0px, 0px, 0px)';
        };



    </script>
</body>

</html>