首页 > 代码库 > CSS3 perspecitve属性
CSS3 perspecitve属性
<style></style>
M
M
.div1{ position: relative; height: 150px; width: 150px; margin: 0px; padding:2px; border: 1px solid black; perspective:550; -webkit-perspective:550; perspective-origin: 50% 100px; -webkit-perspecitve-origin: 50% 100px;}.div2{ position: absolute; border: 1px solid black; background-color: yellow; transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -webkit-animation: rotateXing 1.8s infinite linear; animation: rotateXing 1.8s infinite linear; width:148px; height:148px; text-align:center; line-height:148px;}.div3{ position: absolute; border: 1px solid black; background-color: green; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -webkit-animation: rotateYing 2.8s infinite linear; animation: rotateYing 2.8s infinite linear; width:148px; height:148px; text-align:center; line-height:148px;}@-webkit-keyframes rotateXing { from { transform: rotateX(1deg); -webkit-transform: rotateX(1deg); } to { transform: rotateX(359deg); -webkit-transform: rotateX(359deg); }}@keyframes rotateXing { from { transform: rotateX(1deg); -webkit-transform: rotateX(1deg); } to { transform: rotateX(359deg); -webkit-transform: rotateX(359deg); }}@-webkit-keyframes rotateYing { from { transform: rotateY(1deg); -webkit-transform: rotateY(1deg); } to { transform: rotateY(359deg); -webkit-transform: rotateY(359deg); }}@keyframes rotateYing { from { transform: rotateY(1deg); -webkit-transform: rotateY(1deg); } to { transform: rotateY(359deg); -webkit-transform: rotateY(359deg); }}
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。