Форум

godofjavascript · #1 (**permalink**) 11.01.2013, 23:10

<body>

<style type="text/css">

	div {
		width            : 300px;
		height           : 100px;
		background-color : red;
		margin           : 10px;
		}

	.rotate {
		-webkit-transform : rotateY(45deg);
		-moz-transform    : rotateY(45deg);
		-o-transform      : rotateY(45deg);
		transform         : rotateY(45deg);
		}

</style>


<div>box</div>
<div class="rotate">rotate box</div>

</body>

а вот тут все работает, в чем магия?

http://desandro.github.com/3dtransfo...functions.html

l-liava-l · #2 (**permalink**) 11.01.2013, 23:23

<!DOCTYPE html>
<html>
<body>

<style type="text/css">

	div {
		width            : 300px;
		height           : 100px;
		background-color : red;
		}

	.rotate {
        background:url('http://im5-tub-ru.yandex.net/i?id=102292550-52-72&n=21');
		transform:rotateY(100deg);
        -ms-transform:rotateY(100deg); 
        -moz-transform:rotateY(100deg);
        -webkit-transform:rotateY(100deg); 
        -o-transform:rotateY(100deg);
		}

</style>


<div>box</div>
<div class="rotate">rotate box</div>

</body>
<html>

так работает

godofjavascript · #3 (**permalink**) 11.01.2013, 23:25

нет

Gozar · #4 (**permalink**) 11.01.2013, 23:28

perspective

l-liava-l · #5 (**permalink**) 11.01.2013, 23:28

Может не замечаешь? удали ротацию или блок картинкой залей

godofjavascript · #6 (**permalink**) 11.01.2013, 23:30

в таком случае глючит отладчик хрома так как не показывает ни какого свойства perspective.

Gozar · #7 (**permalink**) 11.01.2013, 23:30

<body>

<style type="text/css">

	.d {
		width            : 300px;
		height           : 100px;
		margin           : 10px;
-webkit-perspective: 600px;
perspective: 600px;
		}

	.rotate {
		background-color : red;
width:100%;
height:100%;
        -ms-transform:rotateY(30deg);
        -moz-transform:rotateY(30deg);
        -webkit-transform:rotateY(30deg);
        -o-transform:rotateY(30deg);
	transform: rotateY(45deg);
		}

</style>


<div class="d">
<div class="rotate">rotate box</div>
</div>
</body>

godofjavascript · #8 (**permalink**) 11.01.2013, 23:32

Gozar,

l-liava-l · #9 (**permalink**) 11.01.2013, 23:34

godofjavascript,
мой код выше работает
http://itmages.ru/image/view/842742/bfb709e1

Gozar · #10 (**permalink**) 11.01.2013, 23:34

godofjavascript,
А пораскинуть мозгами?!

-webkit-perspective: 600px;

Обновил код выше.

Форум

Справочник

Discord чат

Курсы javascript