CSS3旋转跳跃的立方体-css3旋转代码

试试语音读文章

实现3d效果旋转跳跃的立方体。css3中有着的perspective就是为了设置井深。创建一个3D的环境。而transform-style就是为了创建3d环境。

井深：指视觉与平面的距离。使有着三维地点变换的元素发生透视效果。就是我们理解的【Z轴】。 从视觉上研究。值越大就这样看起来距自己越近。元素全体越大；值越小。越远。元素全体越小。在设计中给需要3D的盒子的父级设置井深。让其有着立体透视效果 。一般perspective使用的值800px或者1200px 。这两个值从视觉上就这样看比较舒舒服服。也完全可以根据自己的需求自行设置。

首先。需要创建一个大盒子div将立方体包裹起来。以便在css样式中特定六个面的地点：

div class="wrap" div class="cube"div class="front"前/divdiv class="back"后/divdiv class="left"左/divdiv class="right"右/divdiv class="top"上/divdiv class="bottom"下/div/div/div在CSS中添加有关的样式如下：

* {padding: 0px;margin: 0px;}.wrap{ margin-top: 200px; margin-left: 500px; /*设置井深、透视*/ perspective: 800px; /*视觉来源,透视效果*/ perspective-origin: 50% 100px;}.cube{position: relative;width: 200px;/*创建3d环境*/transform-style: preserve-3d;}.cube div{position: absolute;width: 200px;height: 200px;/*添加内阴影*/box-shadow: 5px 5px 50px plum inset;border: 1px gainsboro solid;} /*旋转设置立方体的六个面*/.front {transform: translateZ(100px);}.back {transform: translateZ(-100px) rotateY(180deg);}.right {transform: rotateY(-270deg) translateX(100px);/*变化元素地点*/transform-origin: top right;}.left {transform: rotateY(270deg) translateX(-100px);transform-origin: center left;}.top {transform: rotateX(-90deg) translateY(-100px);transform-origin: top center;}.bottom {transform: rotateX(90deg) translateY(100px);transform-origin: bottom center;}演示静态效果：

在CSS样式中添加动态效果：

/*帧动作漫画,旋转角度*/@keyframes spin {from { transform:rotateX(0) rotateY(0) rotateZ(0) ; }to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }} /*旋转速度*/.cube {animation: spin 10s infinite linear;}

• 好莱坞鬼才导演昆汀 昆汀·塔伦蒂诺的电影作品
• 世界上最大的两栖动物 最厉害的两栖动物
• 朋友圈晒早餐的幽默说说 早餐心语2022最新
• 王者荣耀中真伤的英雄都有哪些 王者荣耀中真实伤害的英雄大全
• 十大最难吃的水果都是什么 全世界公认最难吃的十大食物

以上就是由互联网推广工程师 网创网 整理编辑的，如果觉得有帮助欢迎收藏转发~