老师请教一个问题
来源: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>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
margin: 40px auto;
perspective: 1000px;
position: relative;
}
.box img {
width: 200px;
height: 200px;
border: 1px solid #000;
border-radius: 100px;
transition: transform 1s ease 0s;
}
.box:hover img {
transform: scale(1, 2)
}
.box .dog {
position: absolute;
top: 0;
left: 0;
transform-origin: 0 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回答
同学你好,问题解答如下:
1、猫上下放大,是因为猫在缩放时,x、y方向的放大比例不一致:
修改如下:
2、狗也可以放大2倍,如下:
3、过渡原点可以调整一下:
不要着急,尝试修改一下。
祝学习愉快!