大家好,我是 Just,这里是「设计师工作日常」,今天分享的是用css打造一个好看的透明感的旋转正方晶体。
《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。
(目录)
整体效果
知识点: ①
nth-of-type
选择器的使用 ② 关于transform
3d 模式渲染使用 ③animation
动画和transform
变换属性的使用
思路:利用
transform
3d 模式实现正方体的 6 个面的搭建,然后nth-of-type
选择器给每个面设置不同的样式,最后给整体的正方体加上旋转动画。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
<div class="cube-box48">
<div class="cube48">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
6个
div
标签分别作为正方体的6个面。
css 部分代码
.cube-box48{
position: relative;
transform-style: preserve-3d;
animation: cube48-eff 3s linear infinite;
}
.cube48 {
width: 44px;
height: 44px;
transform-style: preserve-3d;
transform: rotateX(35deg) rotateY(0deg) rotateZ(45deg);
}
.cube48 > div {
height: 100%;
position: absolute;
width: 100%;
border: 1px solid rgba(255,255,255,0.7);
}
.cube48 div:nth-of-type(1) {
background-color: rgba(55,175,202,0.4);
transform: translateZ(-22px) rotateY(180deg);
}
.cube48 div:nth-of-type(2) {
background-color: rgba(222,116,204,0.4);
transform: rotateY(-270deg) translateX(50%);
transform-origin: top right;
}
.cube48 div:nth-of-type(3) {
background-color: rgba(222,116,204,0.4);
transform: rotateY(270deg) translateX(-50%);
transform-origin: center left;
}
.cube48 div:nth-of-type(4) {
background-color: rgba(248,156,108,0.4);
transform: rotateX(90deg) translateY(-50%);
transform-origin: top center;
}
.cube48 div:nth-of-type(5) {
background-color: rgba(248,156,108,0.4);
transform: rotateX(-90deg) translateY(50%);
transform-origin: bottom center;
}
.cube48 div:nth-of-type(6) {
background-color: rgba(55,175,202,0.4);
transform: translateZ(22px);
}
@keyframes cube48-eff {
100% {
transform: rotateY(360deg);
}
}
1、先给
.cube48
元素开启 3d 模式,设置transform-style: preserve-3d
。
2、然后使用选择器
nth-of-type
给每个面的div
元素增加样式,并分别调整其 X轴、Y轴、Z轴的角度,配合使用transform-origin
来定义其中几个面的变换起点,使6 个div
6 个面,搭建出一个正方体。(这里可以多尝试,不一定要按照实例代码一模一样,你可以尝试不同的面以及不同的角度来搭建其正方体。)
3、最后,给整体
.cube-box48
元素(包裹整个正方体的元素)加上动画参数,让其整体旋转就可以。注意:这里也要开启3d模式!
完整代码如下
html 页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>旋转的正方体</title>
</head>
<body>
<div class="app">
<div class="cube-box48">
<div class="cube48">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</body>
</html>
css 样式
/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.cube-box48{
position: relative;
transform-style: preserve-3d;
animation: cube48-eff 3s linear infinite;
}
.cube48 {
width: 44px;
height: 44px;
transform-style: preserve-3d;
transform: rotateX(35deg) rotateY(0deg) rotateZ(45deg);
}
.cube48 > div {
height: 100%;
position: absolute;
width: 100%;
border: 1px solid rgba(255,255,255,0.7);
}
.cube48 div:nth-of-type(1) {
background-color: rgba(55,175,202,0.4);
transform: translateZ(-22px) rotateY(180deg);
}
.cube48 div:nth-of-type(2) {
background-color: rgba(222,116,204,0.4);
transform: rotateY(-270deg) translateX(50%);
transform-origin: top right;
}
.cube48 div:nth-of-type(3) {
background-color: rgba(222,116,204,0.4);
transform: rotateY(270deg) translateX(-50%);
transform-origin: center left;
}
.cube48 div:nth-of-type(4) {
background-color: rgba(248,156,108,0.4);
transform: rotateX(90deg) translateY(-50%);
transform-origin: top center;
}
.cube48 div:nth-of-type(5) {
background-color: rgba(248,156,108,0.4);
transform: rotateX(-90deg) translateY(50%);
transform-origin: bottom center;
}
.cube48 div:nth-of-type(6) {
background-color: rgba(55,175,202,0.4);
transform: translateZ(22px);
}
@keyframes cube48-eff {
100% {
transform: rotateY(360deg);
}
}
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
我是 Just,这里是「设计师工作日常」,求点赞求关注!