<!DOCTYPE html>
<html>
<head>
<title>transform-style实现Div的3D旋转-柯乐义</title>
<style>
{font-size: 24px;color: #00ff00; padding:0; margin:0;}
#container {
position: relative;
height: 300px;
width: 300px;
-webkit-perspective: 500;
margin-top: 200px;
margin-right: auto;
margin-left: auto;
}
#parent-keleyi-com {
margin: 10px;
width: 280px;
height: 280px;
background-color: #666;
opacity: 03;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 15s infinite linear;
}
#parent-keleyi-com > div {
position: absolute;
top: 40px;
left: 40px;
width: 280px;
height: 200px;
padding: 10px;
-webkit-box-sizing: border-box;
}
#parent-keleyi-com > :first-child {
background-color: #000;
-webkit-transform: translateZ(-100px) rotateY(45deg);
}
#parent-keleyi-com > :last-child {
background-color: #333;
-webkit-transform: translateZ(50px) rotateX(20deg);
-webkit-transform-origin: 50% top;
}
/执行Y轴旋转360度动画/
@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0);}
to {-webkit-transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div>请使用支持CSS3的浏览器<a href=">/以谷歌浏览器为例，实现360度翻转，命名个方法run翻转，调用run，5s周期内实现翻转/
{
-webkit-animation: run 10s linear infinite; /添加动画，动画周期为5s，无限循环/
}
@-webkit-keyframes run {
0% { /动画初始状态时元素旋转角度/
-webkit-transform: rotateX(0deg) rotateY(0deg)
}
100% { /动画结束状态时元素旋转角度/
-webkit-transform:rotateX(360deg) rotateY(360deg)
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）