你这代码写进去怎么没有效果
东方男孩3142619
2016-04-11 19:26
你这代码写进去怎么没有效果
2回答
-
- Connor_Egern
- 2016-06-02 22:22:17
#d01{
margin:0 auto;
width: 500px;
height: 500px;
text-align: center;
font-weight: 900;
font-size: 100px;
-webkit-transform-style:preserve-3d;
-webkit-perspective:800px; /* Safari 和 Chrome */
-webkit-perspective-origin: 200% 50%; /* Safari 和 Chrome */
}
#d02{
background: navajowhite;
transform: rotateX(45deg);
/*transition: height 2s ease-in,background-color 2s ease-out, width 2s ease-in-out, font-size 2s ease, rotate 10s;*/
}
/*#d01:hover{
background: paleturquoise;
width: 1000px;
height: 700px;
font-size: 300px;
perspective: 800px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
transform: rotateX(90deg);
}*/
</style>
</head>
<body>
<div id="d01">
<div id="d02">
Tee
</div>
</div>
这样就行 必须在父层元素上做3D的设置 在子元素哪里进行位置偏转
w3c官方文档这样的3D设置只支持Chorme Safari
-
- qq_微凉阳光依旧的季节_1
- 2016-04-11 21:24:22
???
CSS3 3D 特效
78572 学习 · 425 问题
相似问题