CSS复仇者联盟立体盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;}body {/* perspective视距添加给body */perspective: 800px;}.cube {transform-style: preserve-3d;width: 200px;height: 200px;margin: 50px auto;/* 开启父元素的相对定位 */position: relative;animation: r3d 15s infinite linear;}img {/* 设置图片为不是基线对齐的方式 */vertical-align: top;}.cube > div {height: 200px;width: 200px;/* 开启子元素的绝对定位，让子元素都重叠到了一起 */position: absolute;opacity: .7;}.box1 {transform: rotateY(90deg) translateZ(100px);}.box2{transform: rotateY(-90deg) translateZ(100px);}.box3{transform: rotateX(-90deg) translateZ(100px);}.box4{transform: rotateX(90deg) translateZ(100px);}.box5{transform: rotateX(0deg) translateZ(100px);}.box6{transform: rotateY(180deg) translateZ(100px);}@keyframes r3d {from {transform: rotateX(0) rotateZ(0);}to {transform: rotateX(1turn) rotateZ(1turn);}}</style>
</head>
<body ><div class="cube"><div class="box1"><img src="./img/r/1.jpg" ></div><div class="box2"><img src="./img/r/2.jpg" ></div><div class="box3"><img src="./img/r/3.jpg" ></div><div class="box4"><img src="./img/r/4.jpg" ></div><div class="box5"><img src="./img/r/5.jpg" ></div><div class="box6"><img src="./img/r/6.jpg" ></div></div></body>
</html>

CSS复仇者联盟立体盒子相关推荐

4、CSS立体盒子动画——复仇者联盟
1.效果展示 2.免费代码下载 CSS+立体盒子动画+复仇者联盟-Javascript文档类资源-CSDN下载 3.HTML代码结构 <body> <div class=" ...
练习------复仇者联盟（设置一个立体盒子）
1.我们设置一个正方形立体盒子,盒子每一面都为一个图片,主要用到了旋转.平移等一些效果.注意:不要忘记设置视距. 2.我们可以通过opacity来为元素设置透明效果(以前我们常用的是为颜色设置透明效果 ...
CSS学习之盒子模型
1. 前言盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
使用css将超出盒子的文字显示为省略号
使用css将超出盒子的文字显示为省略号为目标盒子设置以下css样式就可以了: li {overflow: hidden; /* 将超出的内容隐藏 */white-space: nowrap; /* ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
CSS（三）：CSS特性与盒子模型
目录 CSS三大特性层叠性继承性行高的继承优先级权重的叠加盒子模型网页布局的本质盒子模型组成边框(border) 表格细线边框边框会影响盒子实际大小! 内边距(padding) p ...
html+css简单立体导航栏
html+css简单立体导航栏一.简单立体导航栏效果二.代码实现 1.html 2.css 一.简单立体导航栏效果二.代码实现 1.html 代码如下(示例): <!DOCTYPE htm ...
html盒子产生阴影,css给一个盒子加盒阴影的方法
css给一个盒子加盒阴影的方法发布时间:2020-11-16 10:57:56 来源:亿速云阅读:171 作者:小新这篇文章主要介绍了css给一个盒子加盒阴影的方法,具有一定借鉴价值,需要的朋友 ...

CSS复仇者联盟立体盒子

CSS复仇者联盟立体盒子相关推荐

最新文章

热门文章