css3之transform-style 3D旋转效果

_Nutra

已于 2022-10-20 10:24:03 修改

阅读量828

点赞数

文章标签： css3 3d 旋转

于 2013-11-14 22:15:38 首次发布

本文链接：https://blog.csdn.net/lling66/article/details/16331067

版权

//运行看效果

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />


<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>3D旋转效果</title>
<meta name="description" content="" />
<meta name="author" content="Administrator" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />


<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<style type="text/css">
*{font-size: 14px;color: #fff; padding:0; margin:0;}
#container {
position: relative;
height: 300px;
width: 300px;
-webkit-perspective: 500;/*角度*/
margin-top: 200px;
margin-right: auto;
margin-left: auto;
}

#parent {
margin: 10px;
width: 280px;
height: 280px;
background-color: gray;
opacity: 0.8;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 5s infinite linear;
}
#parent > div {
position: absolute;
top: 40px;
left: 40px;
width: 280px;
height: 200px;
padding: 10px;
-webkit-box-sizing: border-box;
}

#parent > :first-child {
background-color: #000;
-webkit-transform: translateZ(-100px) rotateY(45deg);
}
#parent > :last-child {
background-color: #333;
-webkit-transform: translateZ(50px) rotateX(20deg);
-webkit-transform-origin: 50% top;
}

/*执行y轴旋转*/

@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0);}
to {-webkit-transform: rotateY(360deg);}
}

</style>
</head>
<body>
<div>
<header>
<h1>transform-style的3D效果测试</h1>
</header>
<div>
<div id="container">
<div id="parent">
<div>3D旋转效果</div>
<div>3D3D3D3D3D</div>
</div>
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>