纯css样式实现盒子 3D 旋转、鼠标悬停效果
2017-07-13 01:11
429 查看
看到一个css3的动画效果,感觉很高大上的样子,心血来潮自己研究了一下。
先来个效果图:
下面来看这个3d效果究竟是怎么实现的。
(目前IE暂不支持 transform-style: preserve-3d。)
首先,用到的是 transform-style: preserve-3d, 使被转换的子元素保留其 3D 转换。其次是 perspective: 600px,元素距离视图的距离,以像素计。 能产生透视效果的一个属性,值越大,它距离我们眼睛的距离就越近。
transform-style: preserve-3d perspective: 600px这两个属性结合,就可以呈现出 3D 效果。
这里还用到的一个属性是transform:translate。
transform:translateX(),translateX是元素在X轴上的偏移,正值是向右,负值向左。
transform:translateY(),translateY是元素在Y轴上的偏移。正值是顺时针角度偏移,负值是逆时针角度偏移。
transform:translateZ(),translateZ是元素在Z轴上的偏移,正值是离屏幕越近, 负值离屏幕越远。
根据 translateX Y Z值的不同,即可形成盒子各面。
下面是核心代码
html:
css样式:
看着很复杂,其实看懂了就觉得很简单的,慢慢学习吧。
知识掌握命运,学习成就未来!
先来个效果图:
下面来看这个3d效果究竟是怎么实现的。
(目前IE暂不支持 transform-style: preserve-3d。)
首先,用到的是 transform-style: preserve-3d, 使被转换的子元素保留其 3D 转换。其次是 perspective: 600px,元素距离视图的距离,以像素计。 能产生透视效果的一个属性,值越大,它距离我们眼睛的距离就越近。
transform-style: preserve-3d perspective: 600px这两个属性结合,就可以呈现出 3D 效果。
这里还用到的一个属性是transform:translate。
transform:translateX(),translateX是元素在X轴上的偏移,正值是向右,负值向左。
transform:translateY(),translateY是元素在Y轴上的偏移。正值是顺时针角度偏移,负值是逆时针角度偏移。
transform:translateZ(),translateZ是元素在Z轴上的偏移,正值是离屏幕越近, 负值离屏幕越远。
根据 translateX Y Z值的不同,即可形成盒子各面。
下面是核心代码
html:
<div class="wrap-box"> <div class="box-content"> <div class="l-front"> <img src="image/01.jpg" alt="1"></div> <div class="l-left"> <img src="image/02.jpg" alt="1"></div> <div class="l-back"> <img src="image/03.jpg" alt="1"></div> <div class="l-right"> <img src="image/04.jpg" alt="1"></div> <div class="m-front"> <img src="image/05.jpg" alt="1"></div> <div class="m-left"> <img src="image/06.jpg" alt="1"></div> <div class="m-back"> <img src="image/07.jpg" alt="1"></div> <div class="m-right"> <img src="image/08.jpg" alt="1"></div> <div class="s-front"> <img src="image/01.jpg" alt="1"></div> <div class="s-left"> <img src="image/02.jpg" alt="1"></div> <div class="s-back"> <img src="image/03.jpg" alt="1"></div> <div class="s-right"> <img src="image/04.jpg" alt="1"></div> </div> </div>
css样式:
/* 外部容器 */ .wrap-box{ width: 100%; height: auto; perspective: 800px; } /* 核心容器 */ .box-content{ width: 200px; height: 200px; margin: 10em auto 10em; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; position: relative; animation: rotate 10s infinite linear; } @keyframes rotate { 0%{ transform: rotateX(-20deg) r 4000 otateY(0deg) } 50%{ transform: rotateX(-20deg) rotateY(180deg) } 100%{ transform: rotateX(-20deg) rotateY(360deg) } } @-webkit-keyframes rotate { 0%{ -webkit-transform: rotateX(-20deg) rotateY(0deg) } 50%{ -webkit-transform: rotateX(-20deg) rotateY(180deg) } 100%{ -webkit-transform: rotateX(-20deg) rotateY(360deg) } } .box-content img{ width:100%; } .box-content div{ position: absolute; transition: all 0.2s ease; left: 0; } /* 外层div */ .box-content div[class^="l"]{ width: 200px; height: 200px; top:0; } /* 中间div */ .box-content div[class^="m"]{ width: 150px; height: 150px; opacity: 0; top: 30px; } /* 内层div */ .box-content div[class^="s"]{ width: 100px; height: 100px; opacity: 0; top: 50px; } .box-content:hover div[class^="l"]{ top:0; } .box-content:hover div[class^="m"]{ opacity: 1; } .box-content:hover div[class^="s"]{ opacity: 1; } /* 前方元素 */ .box-content div[class*="front"]{ transform: translateZ(100px); -webkit-transform: translateZ(100px); } /* 左边元素 */ .box-content div[class*="left"]{ transform: translateX(-100px) rotateY(-90deg); -webkit-transform: translateX(-100px) rotateY(-90deg); } /* 后方元素 */ .box-content div[class*="back"]{ transform: translateZ(-100px); -webkit-transform: translateZ(-100px); } /* 右边元素 */ .box-content div[class*="right"]{ transform: translateX(100px) rotateY(90deg); -webkit-transform: translateX(100px) rotateY(90deg); } .box-content:hover div.l-front{ transform: translateZ(250px); -webkit-transform: translateZ(250px); } .box-content:hover div.m-front{ transform: translateZ(150px); -webkit-transform: translateZ(150px); } .box-content:hover div.s-front{ transform: translateZ(50px); -webkit-transform: translateZ(50px); } .box-content:hover div.l-left{ transform: translateX(-250px) rotateY(-90deg); -webkit-transform: translateX(-250px) rotateY(-90deg); } .box-content:hover div.m-left{ transform: translateX(-150px) rotateY(-90deg); -webkit-transform: translateX(-150px) rotateY(-90deg); } .box-content:hover div.s-left{ transform: translateX(-50px) rotateY(-90deg); -webkit-transform: translateX(-50px) rotateY(-90deg); } .box-content:hover div.l-back{ transform: translateZ(-250px); -webkit-transform: translateZ(-250px); } .box-content:hover div.m-back{ transform: translateZ(-150px); -webkit-transform: translateZ(-150px); } .box-content:hover div.s-back{ transform: translateZ(-50px); -webkit-transform: translateZ(-50px); } .box-content:hover div.l-right{ transform: translateX(250px) rotateY(90deg); -webkit-transform: translateX(250px) rotateY(90deg); } .box-content:hover div.m-right b461 { transform: translateX(150px) rotateY(90deg); -webkit-transform: translateX(150px) rotateY(90deg); } .box-content:hover div.s-right{ transform: translateX(50px) rotateY(90deg); -webkit-transform: translateX(50px) rotateY(90deg); }
看着很复杂,其实看懂了就觉得很简单的,慢慢学习吧。
知识掌握命运,学习成就未来!
相关文章推荐
- 使用Axure实现3D效果,鼠标滚轮实现图型旋转。
- Angular4实现鼠标悬停3d倾斜效果
- jQuery实现鼠标悬停3d菜单展开动画效果
- jQuery实现HTML表格隔行变色及鼠标悬停变色效果
- Android实现3D旋转效果
- 组纯CSS实现的鼠标悬停效果
- Android自定义组件系列【11】——实现3D立体旋转效果
- CSS3鼠标悬停360度旋转效果
- jQuery实现HTML表格隔行变色及鼠标悬停变色效果 .
- android 实现3D动画旋转效果
- unity 3d中简单巧妙的实现拖动鼠标旋转物体
- 纯CSS3实现鼠标悬停提示气泡效果
- Android自定义组件系列【11】——实现3D立体旋转效果
- jquery实现的3D缩略图悬停效果
- Selenium2 鼠标悬停效果实现
- 具有3D旋转效果的图片组的一种实现
- Androidb不使用OpenGL实现3D旋转效果
- Android Camera控制图旋转、倾斜 - 可用于实现伪3D效果
- [Unity3d]3D车展之汽车开门关门和旋转缩放的效果的实现
- 实现3D旋转效果的方法