CSS画正方体?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective</title>
<style>
.wrapper{
width: 50%;
float: left;
}
.cube{
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style:preserve-3d;
transform:rotateX(-35deg) rotateY(30deg);
}
.side{
position: absolute;
width: 2em;
height: 2em;
background: rgba(255,99,71,0.6);
border: 1px solid rgba(0,0,0,0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front{
transform:translateZ(1em);
}
.bottom{
transform:rotateX(-90deg) translateZ(1em);
}
.top{
transform:rotateX(90deg) translateZ(1em);
}
.left{
transform:rotateY(-90deg) translateZ(1em);
}
.right{
transform:rotateY(90deg) translateZ(1em);
}
.back{
transform:translateZ(-1em);
}
</style>
</head>
<body>
<div class="wrapper w1">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
<div class="wrapper w2">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
</body>
</html>
-
主要内容：@keyframes 规则,animation-name,animation-duration,animation-timing-function,animation-fill-mode,animation-delay,animation-iteration-count,animation-direction,animation-play-state,animation通过《 CSS过渡》一节的学习我们知道，利用 transition 属性可以实现简单的过渡动画，但过渡动画仅能指定开始
-
CSS 动画可以在不借助 Javascript 的情况下做出一些简单的动画效果。 你也可以通过 Javascript 控制 CSS 动画，使用少量的代码，就能让动画表现更加出色。 CSS 过渡（transition）[#css-transition] CSS 过渡的理念非常简单，我们只需要定义某一个属性以及如何动态地表现其变化。当属性变化时，浏览器将会绘制出相应的过渡动画。 也就是说：我们只需要改
-
问题内容： 如何获得CSS动画和JavaScript onClick一起玩？我目前有： 如何申请onClick？ 问题答案： 您确定只在Webkit上显示页面吗？这是通过野生动物园传递的代码。单击按钮后图像将旋转。
-
问题内容： 我一直在寻找一种仅使用CSS3单击位于页面顶部的按钮时向下滚动的方法。 但这对于我的需求而言有点太先进了，因为我只希望浏览器单击页面顶部的一个按钮即可向下滚动，所以我想知道：是否可以在没有输入按钮的情况下进行那些CSS滚动，有锚标签？ HTML看起来像这样： 我已经有一些CSS，需要在单击按钮时触发： 问题答案： 您可以使用css3 伪选择器使用锚标记来完成此操作，当与当前URL哈希具
-
本文向大家介绍CSS画三角形?相关面试题，主要包含被问及CSS画三角形?时的应答技巧和注意事项，需要的朋友参考一下
-
我们前面提到过，转换（transitions） 实际上就是一种特殊的CSS动画： 只有两个状态： 起始状态和终止状态 动画不会出现循环 中间状态只能由时变函数（transition-timing-function）来控制 实际动画需求要复杂得多，比如我们可能会需要： 自动播放的动画（不会有交互状态） 控制中间状态 创建循环动画 在同一个HTML元素上应用不同的动画 在动画过程中控制不同的元素属性