锐客网

  1. 首页 > 睿知 > >

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中添加有关的样式如下：
【CSS3旋转跳跃的立方体-css3旋转代码】* {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;}演示静态效果：

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

文章插图
在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;}
CSS3旋转跳跃的立方体-css3旋转代码

文章插图

    推荐阅读


    上一篇：英雄联盟玩家票选国产最强辅助,小明碾压卷毛宝蓝位居第一,如何评价？

    下一篇：男人从不主动给老婆一分钱,对孩子也不闻不问,这种日子能过吗？