老师请教一个问题

来源:2-11 过渡效果实战课(3)

贪财好色de男青年

2020-12-06 22:13:42

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

在这里输入代码,可通过选择【代码语言】突出显示

老师可以让那只狗在翻盖的同时扩大1.2倍么,我做了一个只是那只猫放大了而且只是上下放大了,这是为什么 啊,我快疯了。

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <title>过度实战效果(3)</title>

    <style>

        * {

            margin0;

            padding0;

        }


        .box {

            width200px;

            height200px;

            margin40px auto;

            perspective1000px;

            positionrelative;

        }


        .box img {

            width200px;

            height200px;

            border1px solid #000;

            border-radius100px;

            transition: transform 1s ease 0s;

        }


        .box:hover img {

            transformscale(12)

        }


        .box .dog {

            positionabsolute;

            top0;

            left0;

            transform-origin0 0;

            transition: transform 1s ease 0s;

        }


        .box:hover img.dog{

            transform:rotateY(-180deg) ;

        }

    </style>

</head>


<body>

    <div class="box">

        <img class="cat" src="images/cat.jpg" alt="">

        <img class="dog" src="images/dog.jpg" alt="">

    </div>

</body>


</html>


写回答

1回答

好帮手慕久久

2020-12-07

​同学你好,问题解答如下:

1、猫上下放大,是因为猫在缩放时,x、y方向的放大比例不一致:

http://img.mukewang.com/climg/5fcd8e0509c363c505540203.jpg

修改如下:

http://img.mukewang.com/climg/5fcd8e4d096fc02306170165.jpg

2、狗也可以放大2倍,如下:

http://img.mukewang.com/climg/5fcd8e7e0977043f06860185.jpg

3、过渡原点可以调整一下:

http://img.mukewang.com/climg/5fcd8ebb09ac443207030534.jpg

不要着急,尝试修改一下。

祝学习愉快!

0

0 学习 · 15276 问题

查看课程