C语言 立方体随鼠标转动,HTML5 盒子悬停动效 - 立方体沿鼠标方向翻滚

最新推荐文章于 2021-07-24 14:20:17 发布
最新推荐文章于 2021-07-24 14:20:17 发布
阅读量134 收藏
点赞数
文章标签： C语言 立方体随鼠标转动

CSS

语言：

CSSSCSS

确定

/* you can ignore this ones */

.container-inner {

float: left;

width: 100%;

}

.container {

width: auto !important;

}

li {

background-color: rgba(256, 18, 156, 0.9);

-webkit-perspective: 360px;

perspective: 360px;

}

.info {

-webkit-transform: rotate3d(1, 0, 0, 90deg);

transform: rotate3d(1, 0, 0, 90deg);

width: 100%;

height: 100%;

padding: 0px 10px;

position: absolute;

top: 0;

left: 0;

border-radius: 4px;

pointer-events: none;

background-color: rgba(26, 88, 156, 0.9);

}

div.info p {

color: #fff;

font-size: 18px;

font-family: microsoft yahei;

}

.in-top .info {

-webkit-transform-origin: 50% 0%;

-ms-transform-origin: 50% 0%;

transform-origin: 50% 0%;

-webkit-animation: in-top 300ms ease 0ms 1 forwards;

animation: in-top 300ms ease 0ms 1 forwards;

}

.in-right .info {

-webkit-transform-origin: 100% 0%;

-ms-transform-origin: 100% 0%;

transform-origin: 100% 0%;

-webkit-animation: in-right 300ms ease 0ms 1 forwards;

animation: in-right 300ms ease 0ms 1 forwards;

}

.in-bottom .info {

-webkit-transform-origin: 50% 100%;

-ms-transform-origin: 50% 100%;

transform-origin: 50% 100%;

-webkit-animation: in-bottom 300ms ease 0ms 1 forwards;

animation: in-bottom 300ms ease 0ms 1 forwards;

}

.in-left .info {

-webkit-transform-origin: 0% 0%;

-ms-transform-origin: 0% 0%;

transform-origin: 0% 0%;

-webkit-animation: in-left 300ms ease 0ms 1 forwards;

animation: in-left 300ms ease 0ms 1 forwards;

}

.out-top .info {

-webkit-transform-origin: 50% 0%;

-ms-transform-origin: 50% 0%;

transform-origin: 50% 0%;

-webkit-animation: out-top 300ms ease 0ms 1 forwards;

animation: out-top 300ms ease 0ms 1 forwards;

}

.out-right .info {

-webkit-transform-origin: 100% 50%;

-ms-transform-origin: 100% 50%;

transform-origin: 100% 50%;

-webkit-animation: out-right 300ms ease 0ms 1 forwards;

animation: out-right 300ms ease 0ms 1 forwards;

}

.out-bottom .info {

-webkit-transform-origin: 50% 100%;

-ms-transform-origin: 50% 100%;

transform-origin: 50% 100%;

-webkit-animation: out-bottom 300ms ease 0ms 1 forwards;

animation: out-bottom 300ms ease 0ms 1 forwards;

}

.out-left .info {

-webkit-transform-origin: 0% 0%;

-ms-transform-origin: 0% 0%;

transform-origin: 0% 0%;

-webkit-animation: out-left 300ms ease 0ms 1 forwards;

animation: out-left 300ms ease 0ms 1 forwards;

}

@-webkit-keyframes in-top {

from {

-webkit-transform: rotate3d(-1, 0, 0, 90deg);

transform: rotate3d(-1, 0, 0, 90deg);

}

to {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

}

@keyframes in-top {

from {

-webkit-transform: rotate3d(-1, 0, 0, 90deg);

transform: rotate3d(-1, 0, 0, 90deg);

}

to {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

}

@-webkit-keyframes in-right {

from {

-webkit-transform: rotate3d(0, -1, 0, 90deg);

transform: rotate3d(0, -1, 0, 90deg);

}

to {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

}

@keyframes in-right {

from {

-webkit-transform: rotate3d(0, -1, 0, 90deg);

transform: rotate3d(0, -1, 0, 90deg);

}

to {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

}

@-webkit-keyframes in-bottom {

from {

-webkit-transform: rotate3d(1, 0, 0, 90deg);

transform: rotate3d(1, 0, 0, 90deg);

}

to {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

}

@keyframes in-bottom {

from {

-webkit-transform: rotate3d(1, 0, 0, 90deg);

transform: rotate3d(1, 0, 0, 90deg);

}

to {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

}

@-webkit-keyframes in-left {

from {

-webkit-transform: rotate3d(0, 1, 0, 90deg);

transform: rotate3d(0, 1, 0, 90deg);

}

to {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

}

@keyframes in-left {

from {

-webkit-transform: rotate3d(0, 1, 0, 90deg);

transform: rotate3d(0, 1, 0, 90deg);

}

to {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

}

@-webkit-keyframes out-top {

from {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

to {

-webkit-transform: rotate3d(-1, 0, 0, 104deg);

transform: rotate3d(-1, 0, 0, 104deg);

}

}

@keyframes out-top {

from {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

to {

-webkit-transform: rotate3d(-1, 0, 0, 104deg);

transform: rotate3d(-1, 0, 0, 104deg);

}

}

@-webkit-keyframes out-right {

from {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

to {

-webkit-transform: rotate3d(0, -1, 0, 104deg);

transform: rotate3d(0, -1, 0, 104deg);

}

}

@keyframes out-right {

from {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

to {

-webkit-transform: rotate3d(0, -1, 0, 104deg);

transform: rotate3d(0, -1, 0, 104deg);

}

}

@-webkit-keyframes out-bottom {

from {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

to {

-webkit-transform: rotate3d(1, 0, 0, 104deg);

transform: rotate3d(1, 0, 0, 104deg);

}

}

@keyframes out-bottom {

from {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

to {

-webkit-transform: rotate3d(1, 0, 0, 104deg);

transform: rotate3d(1, 0, 0, 104deg);

}

}

@-webkit-keyframes out-left {

from {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

to {

-webkit-transform: rotate3d(0, 1, 0, 104deg);

transform: rotate3d(0, 1, 0, 104deg);

}

}

@keyframes out-left {

from {

-webkit-transform: rotate3d(0, 0, 0, 0deg);

transform: rotate3d(0, 0, 0, 0deg);

}

to {

-webkit-transform: rotate3d(0, 1, 0, 104deg);

transform: rotate3d(0, 1, 0, 104deg);

}

}

ul {

margin: 0 auto;

padding: 0;

width: 575px;

}

ul:after {

content: "";

display: table;

clear: both;

}

li {

position: relative;

float: left;

width: 180px;

height: 180px;

margin: 5px;

padding: 0;

list-style: none;

}

li a {

display: inline-block;

vertical-align: top;

text-decoration: none;

border-radius: 4px;

}

li h3 {

margin: 0;

font-size: 16px;

color: rgba(255, 255, 255, 0.9);

}

li p {

font-size: 12px;

line-height: 1.5;

color: rgba(255, 255, 255, 0.8);

}

li .normal {

width: 100%;

height: 100%;

background-color: #ecf0f1;

color: rgba(52, 73, 94, 0.6);

box-shadow: inset 0 2px 20px #e6ebed;

text-align: center;

font-size: 50px;

line-height: 200px;

}

* {

box-sizing: border-box;

}

body {

font-family: 'Lato';

background-color: #0b2b2b;

}

h2 {

color: #fff;

}

h1 {

margin: 0 auto 5px;

text-align: center;

color: #fff;

}

h3 {

font-family: 'Lato', serif;

color: #fff;

}

.container {

width: 100%;

margin: 0 auto;

}

header {

font-family: 'Lato', serif;

text-align: center;

margin: 50px 0 25px;

color: #34495e;

}

header p {

margin: 0;

color: rgba(52, 73, 94, 0.4);

}

duck_1984
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用鼠标来控制一个立方体旋转
11-20
用鼠标来控制一个立方体的旋转速度和方向。
js旋转立方体 根据鼠标的移动，做相应的变化
11-28
js做的可以旋转的立方体。可以根据鼠标的移动，做相应的变化。效果超炫丽
用c语言写的三维旋转立方体
03-22
用C语言写的一个东西，不过没有源代码，希望可以让大家知道c语言也能干大事，激发大家的兴趣。
css3立方体方块翻滚404动画特效
06-11
这是一款简单又富有创意的css3立方体方块翻滚404动画特效，用来做网页404错误提示页面非常不错。
H5+CSS3写的旋转立方体
qq_36205941的博客
12-10 208
用CSS3的动画写出来的，代码很少，技能锻炼代码能力，也能提高思维能力，有兴趣的小伙伴可以试一试哈！ CSS代码 <style> *{padding:0;margin:0;} ul{ /*background: 150px;*/ /*posi...
cub.rar_用cub文件画图_立方体
09-23
用c语言编写的 立方体试验（图形图像学有关的）
OpenGL计算机图形作业《立方体旋转+六个不同贴图》
03-07
用OpenGL和C语言编写一个带纹理和材质的一个立方体的交互式程序。 1)要求生成一个在立方体，并在立方体的六个面上并分别实现不同的纹理映射和材质。 2)可以利用鼠标进行交互，实现该立方体的拖动旋转和点击自由旋转...
OpenGL立方体示例
06-08
包含显示立方体框架，颜色立方体，旋转立方体等示例程序
应用C语言快速绘制由立方体构成的几何体.pdf
09-19
应用C语言快速绘制由立方体构成的几何体.pdf
SIMATIC WINCC中实现弹窗跟随鼠标功能的具体方法（C语言脚本）示例.docx
06-29
SIMATIC WINCC中实现弹窗跟随鼠标功能的具体方法示例
html5 3D旋转立方体
07-19
使用html5+css3+jquery组合，一个可以通过按键控制立方体旋转的demo，具有3D效果。
图形学编程，立方体旋转变换
09-18
基于C语言的立方体旋转的变换，是计算机图形学编程的三维立体图形的变换！
立方体的旋转程序
07-12
立方体绘制，着色和旋转，以及鼠标在旋转立方体的作用
HTML5 transform三维立方体实现360无死角三维旋转效果
09-28
使用HTML5 transform完成三维立方体的模型，可以实现360无死角的三维旋转效果，美中不足的是无法判断旋转时判断每个面的视图顺序，喜欢的朋友可以了解下
HTML5+CSS3实现的立方体翻转3D全屏焦点图特效源码
09-25
这是一款非常大气华丽的HTML5/CSS3 3D实现的全屏3D焦点图特效插件，在页面的两侧，有两个带有立体浮动效果的左右箭头进行图片的切换。其焦点图的图片切换方式是3D效果的，类似立方体翻转一样，焦点图默认显示文字，此处效果演示将文字替换成图片，效果更显炫酷。
立方体html与js特效,css3 transform及原生js实现鼠标拖动3D立方体旋转的示例分析
weixin_32723617的博客
06-09 436
css3 transform及原生js实现鼠标拖动3D立方体旋转的示例分析发布时间：2021-04-21 14:08:12来源：亿速云阅读：90作者：小新这篇文章将为大家详细讲解有关css3 transform及原生js实现鼠标拖动3D立方体旋转的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。js的作用是什么1、能够嵌入动态文本于HTML页面。2、对浏览...
HTML5+CSS3 鼠标悬停3D立体图片效果
qq_44543292的博客
02-17 2617
效果图： 设置一个盒子，里面放两个div。 2.div旋转并设阴影。 3.加伪类，使鼠标移入这个盒子的时候div有动画效果。 这样就完成应该是一个鼠标悬停立体图片的效果。 ...
HTML5第一天笔记05——盒子模型
lqh的博客
07-24 78
<!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>D.
C语言 立方体随鼠标转动,基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转...
weixin_40007189的博客
05-26 240
通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性从而通过改变transform：rotate属性值来达到3d立方体旋转的效果HTML代码块：//X轴旋转角度//Y轴旋转角度CSS代码块：body{c...
c语言完成求立方体体积
最新发布
09-12
要用C语言来计算立方体的体积，首先需要知道立方体的边长。然后，我们可以使用该边长来计算体积，即边长的立方。下面是一个C语言程序示例来完成该任务： ```c #include int main() { float side, volume; // ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值