为了账号安全,请及时绑定邮箱和手机立即绑定
#black{

width: 400px;

height: 400px;

margin: 0 auto;

background: green;
-webkit-transition:background-color 3s;
}
猛然间发现是浏览器的问题,开始用的IE一点效果也没有,用firefox效果一下就出来了
为什么我的也没有效果呢

<html>
<head>
<title></title>
<style>
#block
{
width:400px;
height:400px;
background-color:#69c;
margin:0 auto;

-webkit-transition:background-color 3s;
}

#block:hover
{
background-color:red;
}
</style>
</head>
<body>
<div id="block">
</div>

</body>
</html>
数字6在1下面的,可能是-webkit-preserve-3d的问题,需要把-webkit去掉
背景色改为灰,来个白阴影真漂亮
https://codepen.io/taosang1992/pen/ybKOXo 我做的动画版3D变形,可以自己改变里边的值更改动画方向
这是我仿照老师的写的,正方体每个面改成透明背景,看起来很直观。
https://codepen.io/taosang1992/pen/qmobzY
“为什么六个page要包在一个div里面之后外面还要有一个div???”
包六个page是因为它们实质上是个整体,属于正方体的每一个面,外面包着的div相当于屏幕,我们要透过屏幕去看正方体。
老师给的正方体Demo太酷炫!
rotateX(0deg)不是相当于没翻转吗?
这是我见过最直观的demo
老师讲的很棒!
电脑上的3d效果完全没有显示 用的360浏览器 !!!没反应
可以尝试 document.getElementById("page" + curIndex).style.transform = "rotateX(-90deg)";
3D翻转
#block{
width: 400px;
height: 400px;
background-color: #1B12FA;
margin: 100px auto;
transition:all 2s ease-in 0.2s;
}
#block:hover{
-webkit-transform:rotateX(360deg);
}
课程须知
本课程适合有html、css基础知识的同学进阶学习
老师告诉你能学到什么?
如何使用CSS3来创建一个3D的动画效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消