利用html5制作正方体,同时实现3D旋转效果
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
.eyes{
perspective: 1000px;
}
.box{
/*设置3D效果*/
transform-style: preserve-3d;
/*盒子的大小*/
width: 200px;
height: 200px;
background: red;
/*设置盒子的位置,便于观察*/
margin: 400px auto;
/*复合方式设置动画 三者分别为:动画名 执行一次时间 执行方式*/
animation: zhuan 2s ease;
/*令动画无限执行下去*/
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.box div{
width: 200px;
height: 200px;
opacity: 0.5;
/*设置过渡*/
transition: all 1s ease 0s;
position: absolute;
}
/*调整位置,制作成一个六边形*/
.box .div1{
background: blue;
transform: translateZ(100px);
}
.box .div2{
background: green;
transform: translateZ(-100px);
}
.box .div3{
background: yellow;
transform: rotateX(90deg) translateZ(100px);
}
.box .div4{
background: green;
transform: rotateX(270deg) translateZ(100px);
}
.box .div5{
background: gray;
transform: rotateY(-90deg) translateZ(100px);
}
.box .div6{
background: brown;
transform: rotateY(90deg) translateZ(100px);
}
/*添加3D旋转效果 让其绕X、Y轴同时旋转90度*/
@keyframes zhuan{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
/*给正方体添加一个hover效果*/
.box:hover .div1{
transform: translateZ(200px);
}
.box:hover .div2{
transform: translateZ(-200px);
}
.box:hover .div3{
transform: rotateX(90deg) translateZ(200px);
}
.box:hover .div4{
transform: rotateX(270deg) translateZ(200px);
}
.box:hover .div5{
transform: rotateY(-90deg) translateZ(200px);
}
.box:hover .div6{
transform: rotateY(90deg) translateZ(200px)
}
</style>
</head>
<body>
<div class="eyes">
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</div>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/dingsaifengIT/p/5732839.html
- 点赞
- 收藏
- 分享
- 文章举报
- CSS3 3D效果 实现一个可旋转的正方体
- 在3D制作正方形时,将动画效果的opacity值设置小于1时,正方体崩塌为一个面的原因解析
- 利用JQuery动画制作滑动菜单项效果实现步骤及代码
- 好玩的WPF第四弹:用Viewport2DVisual3D实现3D旋转效果
- 基于HTML5 WebGL实现3D飞机叶轮旋转
- [Unity3d]3D车展之汽车开门关门和旋转缩放的效果的实现
- 利用ViewPager实现3D画廊效果及其图片加载优化
- 可旋转的汽车3D模型效果的实现
- 利用HTML5的画布Canvas实现刮刮卡效果
- 纯css样式实现盒子 3D 旋转、鼠标悬停效果
- 基于HTML5实现3D监控应用流动效果
- 【分享】HTML5的Canvas制作3D动画效果分享
- [Unity3d]3D车展之汽车开门关门和旋转缩放的效果的实现
- 自定义控件Camera+Matrix实现3D旋转及百叶窗效果(雷惊风)
- 纯JS实现旋转图片3D展示效果
- android实现3D旋转效果
- JS实现3D图片旋转展示效果代码
- Android利用Camera实现中轴3D卡牌翻转效果
- Android Camera控制图旋转、倾斜 - 可用于实现伪3D效果
- cocos2d-x 利用CCLabelTTF制作文字描边与阴影效果的实现方法