×

来欣赏下酷炫3D效果(尽量用谷歌浏览器)

作者:andy0012019.03.11来源:Web前端之家浏览:1919评论:0
关键词:css3酷炫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>来欣赏下酷炫3D效果(尽量用谷歌浏览器)</title>

<style>
*{
transform-style:preserve-3d;
}
body{
background:black;
}
.container{
width:200px;
height:200px;
position:relative;
margin:200px auto;
transform-style:preserve-3d;
}
.container div{
width:200px;
height:200px;
position:absolute;
}
.container div:nth-child(1){
transform:translateZ(200px);
}
.container div:nth-child(2){
transform:rotateY(-90deg);
transform-origin: 0 0;
}
.container div:nth-child(3){
transform:rotateY(90deg);
transform-origin: 100% 0;
}
.container div:nth-child(4){
transform:rotateX(90deg);
transform-origin:0 0;
}
.container div:nth-child(5){
transform:rotateX(-90deg);
transform-origin:0 100%;
}
@keyframes rotate{
from{
transform: rotate3d(1,1,1,0);
}
to{
transform: rotate3d(1,1,1,360deg);
}
}
figure{
width:100%;
height:100%;
margin:0;
position:absolute;
background:url(http://img.duoziwang.com/2016/09/02/15483442009.jpg) no-repeat;
background-size:cover;
}
figure:nth-child(1){
-webkit-box-reflect:above;
}
figure:nth-child(2){
-webkit-box-reflect:below;
}
figure:nth-child(3){
-webkit-box-reflect:left;
}
figure:nth-child(4){
-webkit-box-reflect:right;
}
body{
animation: rotate 5s linear infinite;
transform-orgin:50% 200px;
}
html{
overflow:hidden;
}
</style>

</head>
<body>
<div class="container">
<div><figure></figure><figure></figure><figure></figure><figure></figure></div>
<div><figure></figure><figure></figure><figure></figure><figure></figure></div>
<div><figure></figure><figure></figure><figure></figure><figure></figure></div>
<div><figure></figure><figure></figure><figure></figure><figure></figure></div>
<div><figure></figure><figure></figure><figure></figure><figure></figure></div>
<div><figure></figure><figure></figure><figure></figure><figure></figure></div>
</div>
<script>
var div = document.querySelector('div');
var flag = false;// 是否启动拖拽
document.addEventListener('mousedown', function() {
flag = true;
document.body.style.setProperty('animation-play-state', 'paused');
}, false);
document.addEventListener('mouseup', function() {
flag = false;
document.body.style.setProperty('animation-play-state', 'running');
}, false);
document.addEventListener('mousemove', function move(e) {
if (!flag) {
move.lastX = e.x;
move.lastY = e.y;
return;
}
var transform = getComputedStyle(div).getPropertyValue('transform');
transform == 'none' && (transform = '');
div.style.setProperty('transform', transform + 'rotateX(' + (move.lastY - e.y) / 5 + 'deg) rotateY(' + (e.x - move.lastX) / 5 + 'deg)');
move.lastX = e.x;
move.lastY = e.y;
}, false);
</script>
</body>
</html>

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/css29340-2930-59.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 老部落运维

    都是拼音的错呵呵...

  • admin

    已加上,麻烦把我的文字改下:Web前端之家...

  • 老部落运维

    已添加贵站链接我站:https://www.laobuluo.com/(老部落运维)...

  • admin

    这个问题需要看不同的终端预览,可以加群具体聊,谢谢!...

  • 竹叶轻拂水

    在写PC端页面的时候,字体超过16px有的字体会显示的上下不一,凸出来一点,很难看,有没有什么好的方...

  • 素材火

    前三意料之中,中国只有百度上榜...

  • 开创者素材

    网站资源下载站,交换个友链如何?www.kaicz.com...

  • CSS66

    关于CSS组合选择符总结得全面,学习了!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero