2021-6-10 前端达人
-
旋转正方形
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<meta charset="utf-8">
-
<title>旋转立方体</title>
-
<style type="text/css">
-
.stage{
-
position: relative;
-
perspective: 800px;
-
}
-
@keyframes rotate-frame{ /* 设置动画效果 */
-
0% {
-
transform: rotateX(0deg) rotateY(0deg);
-
}
-
-
50% {
-
transform: rotateX(360deg) rotateY(0deg);
-
}
-
100% {
-
transform: rotateX(360deg) rotateY(360deg);
-
}
-
}
-
.container{
-
width: 450px;
-
height: 450px;
-
margin: 0 auto;
-
transform-style:preserve-3d;
-
animation: rotate-frame 8s infinite linear;
-
animation-timing-function: all;
-
animation-direction: normal;
-
-
animation-fill-mode: backwards;
-
-
transform-origin: 50% 50% 75px;
-
-
/*background: yellow; 容器屏幕背景色*/
-
}
-
.container:hover{
-
/*覆盖时暂停动画*/
-
animation-play-state: paused;
-
}
-
.side{
-
width: 150px;
-
height: 150px;
-
position: absolute;
-
text-align: center;
-
line-height: 150px;
-
font-size: 50px;
-
}
-
.top{
-
left: 150px;
-
top: 0;
-
transform: rotateX(-90deg); /* 设置角度 */
-
transform-origin: bottom;
-
background-color: rgba(0,0,255,0.5);
-
}
-
.bottom{
-
left: 150px;
-
top: 300px;
-
transform: rotateX(90deg);
-
transform-origin: top;
-
background-color: rgba(0,255,0,0.5);
-
}
-
.left{
-
left: 0;
-
top: 150px;
-
transform: rotateY(90deg);
-
transform-origin: right;
-
background-color: rgba(255,0,0,0.5);
-
}
-
.right{
-
left: 300px;
-
top: 150px;
-
transform: rotateY(-90deg);
-
transform-origin: left;
-
background-color: rgba(0,0,100,0.5);
-
}
-
.front{
-
left: 150px;
-
top: 150px;
-
transform: translateZ(150px);
-
background-color: rgba(0,100,0,0.5);
-
}
-
.back{
-
left: 150px;
-
top: 150px;
-
background-color: rgba(100,0,0,0.5);
-
}
-
.rotateX180{
-
/*让倒置的数字倒置回正常状态*/
-
transform: rotateX(180deg);
-
}
-
-
</style>
-
-
</head>
-
<body>
-
<div class="stage">
-
<div class="container">
-
<div class="side top" >1</div>
-
<div class="side bottom">2</div>
-
<div class="side left">3</div>
-
<div class="side right">4</div>
-
<div class="side front">5</div>
-
<div class="side back">6</div>
-
</div>
-
</div>
-
</body>
-
</html>
-
纸片旋转
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
<style type="text/css">
-
.zpbox{
-
/*设置3D视角*/
-
perspective: 800px;
-
perspective-origin: bottom right;
-
}
-
.box{
-
height: 200px;
-
width: 100px;
-
margin: 50px auto;
-
-
/*preserve-3d 指定子元素定位在三维空间内 */
-
transform-style: preserve-3d;
-
/*指定变换为：linear-线性过渡*/
-
transition-timing-function：linear;
-
-
/*指定旋转动画*/
-
animation-name: action_b1;
-
animation-duration: 4s;
-
animation-timing-function: all;
-
animation-direction: normal;
-
animation-iteration-count: infinite;
-
animation-fill-mode: backwards;
-
-
position: relative;
-
}
-
.box:hover{
-
/*覆盖时暂停动画*/
-
animation-play-state: paused;
-
}
-
-
.b1{
-
/*声明第一个卡片为浮动，使得两个卡片能重叠*/
-
float: left;
-
height: 200px;
-
width: 100px;
-
background-color: #000;
-
text-align:center;
-
line-height: 100px;
-
color: #fff;
-
font-size:50px;
-
}
-
.b2{
-
height: 200px;
-
width: 100px;
-
background-color: #000;
-
text-align:center;
-
line-height: 100px;
-
color: #fff;
-
font-size:50px;
-
-
/*第二个卡片旋转90度*/
-
transform: rotateX(90deg);
-
-
/*第二个卡片位于中间位置*/
-
position: absolute;
-
margin-left: 0;
-
margin-top: 0;
-
}
-
.rotateX180{
-
/*让倒置的2、4数字倒置回正常状态*/
-
transform: rotateX(180deg);
-
}
-
-
@keyframes action_b1{
-
100%{
-
transform: rotateX(-360deg);
-
}
-
}
-
-
-
-
-
</style>
-
</head>
-
<body>
-
<div class="zpbox">
-
<div class="box">
-
<div class="b1">
-
<div>1</div>
-
<div class="rotateX180">3</div>
-
</div>
-
<div class="b2">
-
<div>2</div>
-
<div class="rotateX180">4</div>
-
</div>
-
</div>
-
</div>
-
-
-
</body>
-
</html>
-
轮播图3D
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
<style type="text/css">
-
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } /*去掉多余的像素*/
-
body{
-
perspective: 800px;
-
}
-
.box{
-
width: 800px;
-
height: 360px;
-
margin: 100px auto;
-
text-align:center;
-
position: relative;
-
left: 50%;
-
margin-left: -400px;
-
/*background-color: #eee;*/
-
transform-style: preserve-3d; /*设置为3D模式*/
-
/*transform: rotateY(-30deg) rotateX(57deg);*/
-
/*transition:5s ease;*/
-
animation-name: animate;
-
animation-duration: 10s;
-
animation-iteration-count: infinite;
-
}
-
-
.box>div{
-
width: 800px;
-
height: 360px;
-
position: absolute;
-
}
-
.box>.up{
-
background: url(flower.jpg); /*引入照片*/
-
transform: rotateX(90deg) translateZ(180px); /* 设置角度 */
-
}
-
.box>.down{
-
background: url(flower.jpg);
-
transform: rotateX(90deg) rotateZ(180deg)translateZ(-180px);
-
}
-
.box>.before{
-
background: url(flower.jpg);
-
transform: translateZ(180px);
-
}
-
.box>.after{
-
background: url(flower.jpg);
-
transform: translateZ(-180px) rotateX(180deg);
-
}
-
.box:hover{
-
animation-play-state: paused; /* 当鼠标悬停的时候停止 */
-
}
-
@keyframes animate{
-
0%{
-
-
}
-
25%{
-
transform: rotateX(90deg);
-
}
-
50%{
-
transform: rotateX(180deg);
-
}
-
75%{
-
transform: rotateX(270deg);
-
}
-
100%{
-
transform: rotateX(360deg);
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box">
-
<div class="up"></div>
-
<div class="down"></div>
-
<div class="before"></div>
-
<div class="after"></div>
-
</div>
-
</body>
-
</html>
-
轮播
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>轮播</title>
-
<style>
-
.frame{
-
position:absolute;
-
margin: 50px 200px;
-
width:280px;
-
height:200px;
-
overflow:hidden;
-
border-radius:6px;
-
background-color: #000;
-
}
-
.imgdiv img{
-
float:left;
-
width:280px;
-
height:200px;
-
}
-
.imgdiv {
-
position: absolute;
-
width: 1500px;
-
}
-
.play{
-
animation: lbt 10s ;
-
animation-direction: normal;
-
animation-iteration-count: infinite;
-
}
-
.play:hover{
-
animation-play-state: paused;
-
}
-
-
@keyframes lbt {
-
0%,20% {
-
margin-left: 0px;
-
}
-
20%,40% {
-
margin-left: -300px;
-
}
-
40%,60% {
-
margin-left: -600px;
-
}
-
60%,80% {
-
margin-left: -900px;
-
}
-
80%,100% {
-
margin-left: -1200px;
-
}
-
}
-
-
</style>
-
</head>
-
<body>
-
<div class="frame" >
-
<div class="imgdiv play">
-
<img src="lunbo.jpg" > <!-- 引入照片 -->
-
<img src="lunbo.jpg" >
-
<img src="lunbo.jpg" >
-
<img src="lunbo.jpg" >
-
<img src="lunbo.jpg" >
-
</div>
-
</div>
-
</body>
-
</html>
-
1
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
部分借鉴自：csdn
原文链接：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com