Однажды в тени звезд. Фантастика. (15 март 2025)

Сотрудники загадочного Института Психологии задумали перестроить сознание обитателей планеты, устранив границы «я» и «не-я», пока процессоры Общемирового Компьютерного Радиуса шептались в своих локальных сетях. Но что-то пошло не так — и голоса зазвучали вразнобой.

Подробнее...

Cubo 3D

Aleksej
Автор темы
Не в сети
Модератор

Больше

10 года 8 мес. назад #1 от Aleksej

Aleksej создал тему: Cubo 3D

Публикую здесь код Cubo 3D, демку которого можно увидеть в блоге .

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cubo 3D</title>
<style>
.stage
{
	perspective: 1000px;
	-webkit-perspective: 1000px;
	/* perspective-origin: 50% 50%;*/ /* this is the default*/
    transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

.stage2
{
    transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%;
    transform:  translateZ(200px);
	-webkit-transform:  translateZ(200px);
}
.cube
{
	/*background-color: blue;*/
	position: relative;
	left: 0px;
	top: 0px;
	width: 300px;
	height: 300px;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: rotate-cube 15s linear infinite;
	animation: rotate-cube 15s linear infinite;
}

.cubeface
{
	position: absolute;
	transition: all 600ms;
	-webkit-transition: all 600ms;
	top: 15px;
	left: 15px;
	width:200px;
	height:200px;
	opacity:0.7;
}

@keyframes rotate-cube
{
	from
	{
        transform: rotateZ(0Deg) rotateY(0Deg);
	}
	to
	{
		transform: rotateZ(1080Deg) rotateY(360Deg);
	}
}

@-webkit-keyframes rotate-cube
{
	from
	{
        -webkit-transform: rotateZ(0Deg) rotateY(0Deg);
	}
	to
	{
		-webkit-transform: rotateZ(1080Deg) rotateY(360Deg);
	}
}

#tile_bberry   { transform: translateZ(150px); background:red; }
#tile_world    { transform: translateX(150px) rotateY(90Deg); background:yellow; }
#tile_user     { transform: translateX(-150px) rotateY(-90Deg); background:green; }
#tile_usb      { transform: translateZ(-150px); background:blue; }
#tile_computer { transform: translateY(150px) rotateX(90Deg); background:purple;  }
#tile_game     { transform: translateY(-150px) rotateX(-90Deg); background:pink; }

:hover > #tile_bberry   { transform: translateZ(250px); }
:hover > #tile_world    { transform: translateX(250px) rotateY(90Deg); }
:hover > #tile_user     { transform: translateX(-250px) rotateY(-90Deg); }
:hover > #tile_usb      { transform: translateZ(-250px); }
:hover > #tile_computer { transform: translateY(250px) rotateX(90Deg); }
:hover > #tile_game     { transform: translateY(-250px) rotateX(-90Deg); }

#tile_bberry   { -webkit-transform: translateZ(150px); }
#tile_world    { -webkit-transform: translateX(150px) rotateY(90Deg); }
#tile_user     { -webkit-transform: translateX(-150px) rotateY(-90Deg); }
#tile_usb      { -webkit-transform: translateZ(-150px); }
#tile_computer { -webkit-transform: translateY(150px) rotateX(90Deg); }
#tile_game     { -webkit-transform: translateY(-150px) rotateX(-90Deg); }

:hover > #tile_bberry   { -webkit-transform: translateZ(250px); }
:hover > #tile_world    { -webkit-transform: translateX(250px) rotateY(90Deg); }
:hover > #tile_user     { -webkit-transform: translateX(-250px) rotateY(-90Deg); }
:hover > #tile_usb      { -webkit-transform: translateZ(-250px); }
:hover > #tile_computer { -webkit-transform: translateY(250px) rotateX(90Deg); }
:hover > #tile_game     { -webkit-transform: translateY(-250px) rotateX(-90Deg); }

.screen-centered
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
}

.screen-left-column
{
    float: left;
    min-width: 290px;
    width: 25%;
    margin: 0px;
    height: 100%;
}

.screen-centered-lc /*centered with left column*/
{
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    min-width: 1140px; /* 850 + 290 */
    height: 850px;
    margin-top: -425px;
}

.screen-main-container-lc /* centered with left column*/
{
    display: inline-block;
    position: relative;
    height: 100%;
    width: 850px;
}

div.tiled
{
    position: absolute;
    margin: 10px;
    margin-top: 100px;
    width: 270px;
    height: 160px;
    text-align: center;
}
.center
{
    text-align: center;
}

</style>

</head>

<body>
	
   <div class="stage screen-centered">
        <div class="stage2">
        <div class=" cube">
            <img class="cubeface" id="tile_bberry"/>
            <img class="cubeface" id="tile_world" />
            <img class="cubeface" id="tile_user"  />
            <img class="cubeface" id="tile_usb" />
            <img class="cubeface" id="tile_computer" />
            <img class="cubeface" id="tile_game" />
        </div>
        </div>
    </div>
	
</body>
</html>

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Работает на Kunena форум