transform 实现附加鼠标悬浮效果，照片旋转，六面体，3D效果

照片旋转，六面体，transform 实现附加鼠标悬浮效果

注意：引入照片分辨率需要正方形，不变形，

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {width: 100%;height: 100%;background-color: black;}body {display: flex;justify-content: center;align-items: center;}ul,li {margin: 0;padding: 0;list-style: none;}@-webkit-keyframes rotate {0% {transform: rotateX(30deg) rotateY(30deg);}100% {transform: rotateX(400deg) rotateY(400deg);}}.box {width: 400px;height: 400px;/* outline: 1px dotted red; */position: relative;top: 0;left: 0;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;animation: rotate 6s linear infinite;}.min-box {width: 100px;height: 100px;background-color: pink;position: absolute;top: 150px;left: 150px;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;/* animation: rotate 6s linear infinite; */}.min-box li {width: 100px;height: 100px;/* background-color: rgb(255, 56, 89); */position: absolute;top: 0;left: 0;transform-style: preserve-3d;transform: rotateX(30deg) rotateY(30deg);}.min-box li:nth-child(1) {/*下面是渲染图片的路径，根据需求自己更改*/background: url(./img/1.jpeg) no-repeat;background-size: 100%;transform: translateZ(50px);}.min-box li:nth-child(2) {background: url(./img/2.jpeg) no-repeat;background-size: 100%;transform: rotateX(90deg) translateZ(50px);}.min-box li:nth-child(3) {background: url(./img/03.png) no-repeat;background-size: 100%;transform: rotateX(-90deg) translateZ(50px);}.min-box li:nth-child(4) {background: url(./img/04.png) no-repeat;background-size: 100%;transform: translateZ(-50px);}.min-box li:nth-child(5) {background: url(./img/05.png) no-repeat;background-size: 100%;transform: rotateY(90deg) translateZ(50px);}.min-box li:nth-child(6) {background: url(./img/06.png) no-repeat;background-size: 100%;transform: rotateY(-90deg) translateZ(50px);}/* 大盒子的css */.max-box {width: 400px;height: 400px;/* background: orange; */position: absolute;top: 0px;left: 0px;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}.max-box li {width: 400px;height: 400px;background-color: rgb(255, 56, 89);position: absolute;top: 0;left: 0;opacity: 0.7;transform: rotateX(30deg) rotateY(30deg);}.max-box li:nth-child(1) {background: url(./img/1.png) no-repeat;background-size: 100%;transform: translateZ(200px);}.box:hover .max-box li:nth-child(1) {transform: translateZ(300px);}.max-box li:nth-child(2) {background: url(./img/2.png) no-repeat;background-size: 100%;transform: rotateX(90deg) translateZ(200px);}.box:hover .max-box li:nth-child(2) {transform: rotateX(90deg) translateZ(300px);}.max-box li:nth-child(3) {background: url(./img/3.png) no-repeat;background-size: 100%;transform: rotateX(-90deg) translateZ(200px);}.box:hover .max-box li:nth-child(3) {transform: rotateX(-90deg) translateZ(300px);}.max-box li:nth-child(4) {background: url(./img/4.png) no-repeat;background-size: 100%;transform: translateZ(-200px);}.box:hover .max-box li:nth-child(4) {transform: translateZ(-300px);}.max-box li:nth-child(5) {background: url(./img/5.png) no-repeat;background-size: 100%;transform: rotateY(90deg) translateZ(200px);}.box:hover .max-box li:nth-child(5) {transform: rotateY(90deg) translateZ(300px);}.max-box li:nth-child(6) {background: url(./img/6.png) no-repeat;background-size: 100%;transform: rotateY(-90deg) translateZ(200px);}.box:hover .max-box li:nth-child(6) {transform: rotateY(-90deg) translateZ(300px);}</style>
</head><body><div class="box"><ul class="min-box"><li></li><li></li><li></li><li></li><li></li><li></li></ul><ul class="max-box"><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>

transform 实现附加鼠标悬浮效果，照片旋转，六面体，3D效果相关推荐

css简单实现鼠标悬浮时图片向上浮动的效果
文章目录前言一.效果图二.使用步骤 1.HTML代码 2.CSS代码总结前言 css简单实现鼠标悬浮时图片向上浮动的效果一.效果图二.使用步骤 1.HTML代码代码如下(示例): &l ...
【旋转动画】掘金头像鼠标悬浮，头像旋转
效果图鼠标悬浮后,头像开始旋转,并不断加快速度( gif没能完全展示出实际效果 ) 实现  <img src="./logo.jpg" ...
照片转成3D效果怎么做？建议收藏这些方法
小伙伴们都有看过3D电影吗?它能够让电影画面具有立体效果,使我们观看的时候更有身临其境的感觉.其实现在随着技术的发展,我们也可以做到3D照片制作的操作.那你们知道如何把照片转换成3D吗?想要学习怎么制 ...
android listview立体效果,Android 实现ListView 3D效果 - 1
一.有图有真相二.简单分析 1. ListView 3D实现整体布局使用自定义ListView, 只是继承自ListView父类的父类AdapterView,具体实现可参考之前写的文章: <A ...
CSS环绕球体的旋转文字-3D效果
代码下载地址: http://www.demodashi.com/demo/12482.html 项目文件结构截图只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主 ...
html制作菱锥旋转,Flash 3d效果精彩实例：制作旋转的三棱锥
这篇教程是向大家介绍如何利用Flash 3d制作旋转的三棱锥,希望大家通过本篇教程能知道Flash 3d的精彩效果.教程比较基础,适合新手学习.推荐过来,希望对大家有所帮助! 旋转的三棱锥本实例最终 ...
css鼠标悬浮显示效果(鼠标手势)
鼠标悬浮显示效果将鼠标悬浮到下面超链接上看效果! css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 CSS鼠标手型效果 Example:CSS鼠标手型效果 C ...
WebGL入门(三十四)-三维空间中鼠标控制物体旋转，用鼠标控制立方体的旋转
用鼠标控制立方体的旋转 1. demo效果 2. 实现要点 2.1 注册鼠标事件 2.1.1 注册鼠标事件函数的声明 2.1.2 注册鼠标事件函数的调用 2.2 纹理图片加载 2.3 图形绘制 3. ...
el-table 鼠标悬浮时样式的修改
前言项目中表格做了一个功能当搜索时,将搜索出的行进行高亮显示.比如: 但是客户最近提了个问题,希望鼠标移入时高亮颜色不要变. 解决鼠标移入颜色改变是引入当鼠标移入时,tr上自动添加了一个hover ...
windows真正体验3D效果桌面
Yod m 3D V1.20_多国语言绿色免费版_系统桌面呈现3D的效果.真正体验3D效果桌面软件大小:4.1 MB 软件类型:绿色软件 / 免费软件运行环境:Win2000/WinXP/Win2 ...

transform 实现附加鼠标悬浮效果，照片旋转，六面体，3D效果

照片旋转，六面体，transform 实现附加鼠标悬浮效果

transform 实现附加鼠标悬浮效果，照片旋转，六面体，3D效果相关推荐

最新文章

热门文章

transform 实现 附加鼠标悬浮效果，照片旋转，六面体，3D效果

照片旋转，六面体 ，transform 实现 附加鼠标悬浮效果

transform 实现 附加鼠标悬浮效果，照片旋转，六面体，3D效果相关推荐

最新文章

热门文章

transform 实现附加鼠标悬浮效果，照片旋转，六面体，3D效果

照片旋转，六面体，transform 实现附加鼠标悬浮效果

transform 实现附加鼠标悬浮效果，照片旋转，六面体，3D效果相关推荐