纯CSS 常见3D实例
一、正方体
我认为正方体可以算是3D图像的基础吧，首先正方体是由六个相同的面所组成，其次就需要我们依次构造。（据体构造在代码中）
成平图如下:
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>正方体</title>
<style>
.d3{
height: 300px;
width:300px;
perspective: 800px;
margin:140px auto;
border:1px solid #ccc; }
.stage{
height: 300px;
width: 300px;
transform-style: preserve-3d;
position: relative;
transform: rotateX(45deg) rotateY(45deg);
}
.role{
height: 300px;
width: 300px;
position: absolute;
}
.stage{
animation: dong 3s linear infinite;（这是舞台）
}
.stage:hover{
animation: paused;
}
@keyframes dong{（这是使舞台旋转的动画）
from{
transform: rotateX(45deg) rotateY(45deg);
}
to{
transform: rotateX(405deg) rotateY(405deg);
}
}
.di1{（正方体的前面）
background: rgb(21, 163, 52);
transform: translateZ(150px);（沿着z轴向前移动150px）
font-size:100px;
font-family:KaiTi;
text-align: center;
line-height: 300px;
}
.di2{（正方体的后面）
background: blue;
transform: translateZ(-150px) rotateY(180deg);（沿着z轴向前移动150px然后沿着y轴旋转180°*注意顺序哦是先移动后旋转）
font-size:100px;
font-family:KaiTi;
text-align: center;
line-height: 300px;
}
.di3{（正方体的左面）
background: purple;
transform: rotateY(-90deg) translateZ(150px);
font-size:100px;
font-family:KaiTi;
text-align: center;
line-height: 300px;
}
.di4{（正方体的右面）
background: pink;
transform: rotateY(90deg) translateZ(150px);
font-size:100px;
font-family:KaiTi;
text-align: center;
line-height: 300px;
}
.di5{（正方体的上面）
background: red;
transform: rotateX(90deg) translateZ(150px);
font-size:100px;
font-family:KaiTi;
text-align: center;
line-height: 300px;
}
.di6{（正方体的下面）
background: yellow;
transform: rotateX(-90deg) translateZ(150px);
font-size:100px;
font-family:KaiTi;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="d3">
<div class="stage">
（将正方体分为六个相同的面）
<div class="role di1">前</div>
<div class="role di2">后</div>
<div class="role di3">左</div>
<div class="role di4">右</div>
<div class="role di5">上</div>
<div class="role di6">下</div>
</div>
</div>
</body>
</html>二、动态立体图片册
将图片册设计成立体3D的效果
效果图如下：
利用旋转、移动、倾斜和3D效果让你的图册更加漂亮。
代码如下：
（将第一张定好位置后将后面的依次排列）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事例一</title>
<style>
body{
height: 100vh;
}
.div {
height: 500px;
width: 800px;
perspective: 800px;
margin: 50px auto;
}
.div1 {
height: 500px;
width: 800px;
transform-style: preserve-3d;
position: relative;
/* transform: rotateY(-10deg); */
}
.div_0{
height:400px;
width:600px;
position: absolute;
margin-top:110px;
margin-left:50px;
}
.div_1{
height:400px;
width:600px;
background: url(../day03/timg.jpg);
background-size: 600px 400px;
border-radius: 20px;
transform-origin: right bottom;
transition: 3s;
}
.div_2{
background: url(../day03/timg1.jpg);
border-radius: 20px;
background-size: 600px 400px;
transform-origin: right bottom;
transform: rotateZ(2deg) translateZ(-20px) translateX(20px) translateY(-20px);
}
.div_2:hover{
transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
transition: 1s;
}
.div_2:hover~.div_1{
/* transform-origin: right bottom; */
transform: rotateZ(2deg) translateZ(20px) translateX(20px) translateY(-20px);
transition: 1s;
}
/* body:hover .div_1{
opacity: 0;
transition: 3s;
} */
.div_3{
background: url(timg2.jpg);
border-radius: 20px;
background-size: 600px 400px;
transform-origin: right bottom;
transform: rotateZ(4deg)translateZ(-40px)translateX(40px)translateY(-40px);
}
.div_3:hover{
transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
transition: 1s;
}
.div_4{
background: url(timg4.jpg);
border-radius: 20px;
background-size: 600px 400px;
transform-origin: right bottom;
transform: rotateZ(6deg)translateZ(-60px) translateX(60px)translateY(-60px);
}
.div_4:hover{
transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
transition: 1s;
}
.div_5{
background: url(timg5.jpg);
border-radius: 20px;
background-size: 600px 400px;
transform-origin: right bottom;
transform: rotateZ(8deg)translateZ(-80px) translateX(80px)translateY(-80px);
}
.div_5:hover{
transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
transition: 1s;
}
.div_6{
background: url(timg3.jpg) no-repeat;
border-radius: 20px;
background-size: 600px 400px;
transform-origin: right bottom;
transform: rotateZ(10deg)translateZ(-100px) translateX(100px)translateY(-100px);
}
.div_6:hover{
transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
transition: 1s;
}
</style>
</head>
<body>
<div class="div">
<div class="div1">
<div class=" div_0 div_1"></div>
<div class=" div_0 div_2"></div>
<div class=" div_0 div_3"></div>
<div class=" div_0 div_4"></div>
<div class=" div_0 div_5"></div>
<div class=" div_0 div_6"></div>
</div>
</div>
</body>
</html>三、平面的星空
效果图如下：
代码如下：
（由于没有用js所以只有平面的效果了
你掌握好旋转的中心点就很容易了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>太阳系</title>
<style>
body {
background: url(timg01.jpg) no-repeat;
background-size: 100%;
}
.box1 {
height: 600px;
width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 50%;
}
.box1_0 {
height: 100px;
width: 100px;
margin: 0 auto;
border: 1px solid white;
border-radius: 50%;
position: absolute;
top: calc(50% - 59px);
left: 322px;
transform-origin: 345.5px;
animation: dong2 5s linear infinite 4s;
}
@keyframes dong2 {
from {
transform: rotate(0)
}
100% {
transform: rotate(360deg);
}
}
.box1_2 {
height: 13px;
width: 13px;
margin: 0 auto;
/* border: 1px solid #ccc; */
border-radius: 50%;
background: white;
position: absolute;
top: calc(50% - 7.5px);
left: 96px;
transform-origin: -45px;
animation: dong3 5.5s linear infinite ;
/* animation-iteration-count: 200; */
}
@keyframes dong3 {
from {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.box1_1 {
height: 15px;
width: 15px;
margin: 0 auto;
/* border: 1px solid #ccc; */
border-radius: 50%;
background: rgb(7, 100, 223);
position: absolute;
top: 45px;
left: calc(50% - 16.5px);
}
.box2 {
height: 400px;
width: 400px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 200px);
}
.box2_1 {
height: 15px;
width: 15px;
margin: 0 auto;
/* border: 1px solid #ccc; */
border-radius: 50%;
background: rgb(198, 208, 221);
position: absolute;
top: calc(50% - 7.5px);
left: 43px;
transform-origin: 157.5px;
animation: dong1 5s linear infinite .5s;
}
@keyframes dong1 {
from {
transform: rotate(0)
}
100% {
transform: rotate(360deg);
}
}
.box2_2 {
height: 15px;
width: 15px;
margin: 0 auto;
border-radius: 50%;
background: #644e11;
position: absolute;
top: calc(50% - 7.5px);
left: -7px;
transform-origin: 207.5px;
animation: dong 5s linear infinite;
}
@keyframes dong {
from {
transform: rotate(0)
}
100% {
transform: rotate(360deg);
}
}
.box3 {
height: 300px;
width: 300px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
}
.box4 {
height: 30px;
width: 30px;
margin: 0 auto;
border-radius: 50%;
background: orange;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 15px);
}
.boxli{
height: 900px;
width: 900px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
top:-120px;
left:calc(50% - 450px);
}
.boxli_1{
height: 15px;
width: 15px;
margin: 0 auto;
border-radius: 50%;
background: rgb(116, 100, 56);
position: absolute;
top:500px;
left:-6px;
transform-origin: 455.5px -38px;
animation: dongli 5s linear infinite;
}
@keyframes dongli {
from {
transform: rotate(0)
}
100% {
transform: rotate(360deg);
}
}
</style></head>
<body>
<div class="box1">
<div class="box1_0">
<div class="box1_2"></div>
<div class="box1_1"></div>
</div>
<div class="box2">
<div class="box2_1"></div>
<div class="box2_2"></div>
<div class="box3">
<div class="box4"></div>
</div>
</div>
</div>
<div class="boxli">
<div class="boxli_1"></div>
</div></body>
</html>
纯CSS 常见3D实例的更多相关文章
- 纯CSS实现3D正方体动画效果
前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图
- 纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...
- 纯CSS实现3D图像轮转
CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先. 首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图 ...
- 纯CSS做3D旋转魔方
昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试 做成自己特有的魔方 <!DOCTYPE h ...
- 纯CSS绘制3D立方体
本篇记录的是使用CSS3绘制3D立方体,并旋转起来. 我的思路: 1️⃣ 首先,用div元素画6个正方形摞在一起放在画布中间.为了区分,分别给每个div选择了不同的颜色,并且设置为半透明方便透视. 2 ...
- 纯CSS实现3D照片墙
HTML部分: <body> <div class="photo-wrap"> <!-- 舞台 --> <div class=" ...
- 纯css实现3D字体
下面分别是html,css和js代码: <div class="wrapper"> <h1 contenteditable data-heading=" ...
- 纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...
- 纯CSS炫酷的3D旋转
<html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...
随机推荐
- 《JAVA设计模式》之抽象工厂模式(Abstract Factory)
场景问题 举个生活中常见的例子——组装电脑,我们在组装电脑的时候,通常需要选择一系列的配件,比如CPU.硬盘.内存.主板.电源.机箱等.为讨论使用简单点,只考虑选择CPU和主板的问题. 事实上,在选择 ...
- Codeforces 1097D (DP+分解质因数)
题目 传送门 分析 考虑\(n=p^q\)且p为质数的情况 设dp[i][j]表示经过i次变化后数为\(p^j\)的概率 则初始值dp[0][q]=1 状态转移方程为\(dp[i][j]=\sum{} ...
- 2、NumPy 数据类型
1.NumPy 数据类型 numpy 支持的数据类型比 Python 内置的类型要多很多,基本上可以和 C 语言的数据类型对应上,其中部分类型对应为 Python 内置的类型.下表列举了常用 NumP ...
- 查询sqlserver中表信息
ALTER PROCEDURE [dbo].[GetTableInfo] @tableName NVARCHAR(MAX) AS BEGIN SELECT -- CASE -- WHEN col.co ...
- Django学习——开发你的第一个Django应用2
接着上一节的内容来说.我们将继续关注与上一节制作的polls应用以及Django自动产生额度管理网站. 产生一个管理员用户 首先我们需要产生一个管理员用户,运行如下命令: python manage. ...
- smbspool - 将一个打印文件发送到一台SMB打印机
总览 SYNOPSIS smbspool {job} {user} {title} {copies} {options} [filename] 描述 DESCRIPTION 此程序是Samba(7)套 ...
- 05.Linux-CentOS系统普通用户SSH远程问题
问题:appuser用户SSH远程连接Linux服务器出现的问题: Connecting?to?localhost:22...Connection?established.To?escape?to?l ...
- ffmpeg音频文件转换之使用stdin/stdout或BytesIO对象输入输出
最近在搞小程序录音,然后使用百度接口做语音识别. 小程序目前仅支持mp3和aac编码格式.虽然百度接口提供的m4a格式支持能直接识别小程序的录音文件,但由于自己还有其他一系列需求(比如直接读取数据,根 ...
- Spring 事物机制(总结)
Spring两种事物处理机制,一是声明式事物,二是编程式事物 声明式事物 1)Spring的声明式事务管理在底层是建立在AOP的基础之上的.其本质是对方法前后进行拦截,然后在目标方法开始之前创建或者加 ...
- Kotlin——关于字符串（String）常用操作汇总
在前面讲解Kotlin数据类型的时候,提到了字符串类型,当然关于其定义在前面的章节中已经讲解过了.对Kotlin中的数据类型不清楚的同学.请参考Kotlin——初级篇(三):数据类型详解这篇文章. 在 ...