css动画中,transform与transition动画常常可以设置3D动画,以下例子是3D旋转的具体代码,希望对大家有帮助。。。。。。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D几何体</title> <style type="text/css"> .out { width: 300px; height: 300px; margin: 100px auto; position: relative; /*perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。注释:perspective 属性只影响 3D 转换元素。*/ perspective: 1200px; } /*定义盒子包含框样式*/ .wrapper { /*transform--style属性指定嵌套元素是怎样在三维空间中呈现。注意: 使用此属性必须先使用 transform 属性.*/ transform-style: preserve-3d; } /*定义六个面的公共样式*/ .wall { background: rgba(255, 0, 0, 0.5); border: 1px solid black; font-size: 30px; font-weight: bold; color: #FFFFFF; text-align: center; height: 200px; line-height: 200px; width: 200px; position: absolute; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); } /*定义每个面样式*/ .front { transform: translateZ(100px); } .back { transform: rotateX(180deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); } /*定义关键帧动画*/ @keyframes abc { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } /*鼠标移入后执行动画*/ .wrapper:hover { animation: abc 3s linear infinite; } </style> </head> <body> <div class="out"> <div class="wrapper"> <div class="wall front">front</div> <div class="wall back">back</div> <div class="wall left">left</div> <div class="wall right">right</div> <div class="wall top">top</div> <div class="wall bottom">bottom</div> </div> </div> </body> </html>
效果如下: